Question

我的目标是将表单输入限制为220个字符。我可以使用一些服务器端PHP和maxlength属性来执行此操作。

我的问题与我在页面上显示的字符倒计时有关，该字幕倒计时显示用户在达到输入字段中可输入的最大值之前剩余的字符数。

我已经达到了下面的演示。

演示： http://jsfiddle.net/GPmq8/

当用户键入输入字段时，您将看到计数器减少。这一点有效。

在用户提交表单后，我希望计数器返回220（即重置自身）。如何修改我的脚本来做到这一点？注意，我的表单是通过AJAX提交的，因此没有页面重新加载。

Answer 1

我的示例中没有看到任何表单标记，但是当有人点击提交时您可以尝试恢复input

的值

<input type="text" placeholder="Type something..." class="form-entry" name="form-entry" rows="1" maxlength="220" value="" />
<div><button name='Mybutton' id='MyButton'>Submit</button></div>
<hr />
<span class="countdown"></span>

function updateCountdown() {
    // 220 is the max message length
    var remaining = 220 - jQuery('.form-entry').val().length;
    jQuery('.countdown').text(remaining + '');
}

jQuery(document).ready(function($) {
    updateCountdown();
    $('.form-entry').change(updateCountdown);
    $('.form-entry').keyup(updateCountdown);

    $('#MyButton').click(function(){
        jQuery('.countdown').text('220');
        jQuery('.form-entry').val('');

    });

});

http://jsfiddle.net/GPmq8/

Answer 2

提交后，只需将输入字段重置为空字符串即可。您的计数器将被您现有的代码重置。您可以通过在您的ajax返回的脚本中添加以下行来实现此目的（例如success）。

$.ajax({
     type: "POST",
     url: '/YOUR.php',
     data: formData,
     success: function (data) {
          $('.form-entry').val(''); 
     }
 });

Answer 3

在ajax调用的成功事件中，重置你的东西。

Answer 4

您可以执行以下操作：

function resetCountdown(){
 $('.countdown').text('220');
 $('.form-entry').val('');  
}

$.ajax( "example.php" )
  .done(function() {
    resetCountdown();
});

在提交表单后重置jQuery输入字段字符倒计时

4 个答案: