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

我的目标是将表单输入限制为220个字符。我可以使用一些服务器端PHP和

maxlength

属性来实现这一点

我的问题与我在页面上显示的字符倒计时有关，该页面显示用户在达到输入字段中可以键入的最大字符数之前还剩下多少个字符

我已经得到了下面的演示

演示：

您将看到，随着用户在输入字段中键入，计数器会减少。这个钻头正在工作

---

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

提交后只需将输入字段重置为空字符串即可。您的计数器将被当前代码重置。 您可以在ajax返回的脚本中添加以下行（例如，

success

）

---

提交后，只需将输入字段重置为空字符串。您的计数器将被当前代码重置。 您可以在ajax返回的脚本中添加以下行（例如，

success

）

---

你可以这样做：

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

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

---

你可以这样做：

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

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

---

在ajax调用的成功事件中，重置您的内容。

在ajax调用的成功事件中，重置您的内容。

我在您的示例中没有看到任何表单标记，但您可以在有人单击提交时尝试还原

输入的值

<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('');

    });

});


提交

函数updateCountdown（）{
//220是最大消息长度
var remaining=220-jQuery（'.form entry'）.val（）.length；
jQuery（'.countdown'）.text（剩余+''）；
}
jQuery（文档）.ready（函数（$）{
updateCountdown（）；
$（'.form entry'）.change（updateCountdown）；
$（'.form entry'）.keyup（updateCountdown）；
$（“#MyButton”）。单击（函数（）{
jQuery（'.countdown'）.text（'220'）；
jQuery（'.form entry'）.val（''）；
});
});

我在您的示例中没有看到任何表单标记，但您可以在有人单击提交时尝试还原
输入的值

<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('');

    });

});


提交

函数updateCountdown（）{
//220是最大消息长度
var remaining=220-jQuery（'.form entry'）.val（）.length；
jQuery（'.countdown'）.text（剩余+''）；
}
jQuery（文档）.ready（函数（$）{
updateCountdown（）；
$（'.form entry'）.change（updateCountdown）；
$（'.form entry'）.keyup（updateCountdown）；
$（“#MyButton”）。单击（函数（）{
jQuery（'.countdown'）.text（'220'）；
jQuery（'.form entry'）.val（''）；
});
});

对不起，我省略了表单标签以保持其简短。这种方法的问题是当有人单击submit（提交）时，计数器会重置，但表单不再提交。这是一个概念，如果您粘贴完整的代码，我们可以为您提供完整的解决方案，请记住也在服务器端进行验证，永远不要信任usersjQuery（'.countdown'）。text（'220'）；当然回答了我的问题-它在提交后重置倒计时。我相信我一定能设法把表格交上来。谢谢。对不起，为了保持简短，我省略了表单标签。这种方法的问题是当有人单击submit（提交）时，计数器会重置，但表单不再提交。这是一个概念，如果您粘贴完整的代码，我们可以为您提供完整的解决方案，请记住也在服务器端进行验证，永远不要信任usersjQuery（'.countdown'）。text（'220'）；当然回答了我的问题-它在提交后重置倒计时。我相信我一定能设法把表格交上来。谢谢，谢谢你的回答。我正在使用的脚本可以在这里找到：-我不完全确定如何合并$（'.formentry'）.val（''）；对它感兴趣吗？嗨，我很快读了一遍代码。我在
liveblog.ajax\u request
中找到了
success:success\u callback
。因此，在带有输入字段的页面中，应该有某种调用
liveblog.ajax\u request
及其参数（用于将输入字段的内容发送到php脚本）。在这里，您必须插入
function（）{$（'.formentry'）.val（'''）；}作为第三个参数。感谢调查。我选择了避免修改插件，以防将来需要更新。jcho360的jQuery（'.countdown'）.text（'220'）；他似乎成功了+我希望你的回答能对我有所帮助。谢谢你的回答。我正在使用的脚本可以在这里找到：-我不完全确定如何合并$（'.formentry'）.val（''）；对它感兴趣吗？嗨，我很快读了一遍代码。我在
liveblog.ajax\u request
中找到了
success:success\u callback
。因此，在带有输入字段的页面中，应该有某种调用
liveblog.ajax\u request
及其参数（用于将输入字段的内容发送到php脚本）。在这里，您必须插入
function（）{$（'.formentry'）.val（'''）；}作为第三个参数。感谢调查。我选择了避免修改插件，以防将来需要更新。jcho360的jQuery（'.countdown'）.text（'220'）；他似乎成功了+我希望你的回答能对我有所帮助。