Question

单击提交按钮后，如何将字符倒计时重置为150？现在我有一个输入的输入文本框，它会记下您剩下的字符数，然后当您想要提交它时，单击提交按钮并将其添加到表中。但问题是数字保持不变，并且在您再次开始输入框之前不会重置为150。我希望它在您单击提交按钮时自动重置为150。我需要将哪些内容添加到我的代码中？

http://jsfiddle.net/julianbuscema/qv0zd8pv/

$(document).ready(function(){
    var left = 150
    $('#text_counter').text(left);

    $('#status').keyup(function () {

        left = 150 - $(this).val().length;

        if(left < 0){
            $('#text_counter').addClass("overlimit");
        }
        if(left >= 0){
           $('#text_counter').removeClass("overlimit");
        }

        $('#text_counter').text(left);
    });
});

Answer 1

重新宣布

XamDialogWindow_LostKeyboardFocus

Answer 2

添加此

$("#text_counter").text(150);

到你的

btn.onclick

Answer 3

无需混合使用jquery和vanila脚本事件处理程序

$(document).ready(function() {
  var limit = 15;

  var $counter = $('#text_counter').text(limit);
  var $input = $('#status').keyup(function() {

    var left = limit - $(this).val().length;
    $counter.toggleClass("overlimit", left < 0).text('Characters left: ' + left);
  });

  $('button').click(function() {
    var val = $input.val();

    if (val.length < 10) {
      alert("Post must be at least 10 characters.");
      return;
    }

    $('table').append('<tr><td>' + val + '</td></tr>');
    $input.val('');
    $counter.text(limit).removeClass('overlimit');
  })

});

＆＃13;

$(document).ready(function() {
  var limit = 15;

  var $counter = $('#text_counter').text(limit);
  var $input = $('#status').keyup(function() {

    var left = limit - $(this).val().length;
    $counter.toggleClass("overlimit", left < 0).text('Characters left: ' + left);
  });

  $('button').click(function() {
    var val = $input.val();

    if (val.length < 10) {
      alert("Post must be at least 10 characters.");
      return;
    }

    $('table').append('<tr><td>' + val + '</td></tr>');
    $input.val('');
    $counter.text(limit).removeClass('overlimit');
  })

});

＆＃13;

input[type=text] {
  padding: 5px;
  border: 2px solid #000080;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
input[type=text]:focus {
  border-color: #ccc;
}
-webkit-border-radius:5px;
 border-radius:5px;

}
.rows {
  text-align: center;
}
.postTable {
  width: 400px;
  height: 33px;
  border: solid 1px lightgray;
  border-width: 2px;
  font-family: Verdana;
  font-size: 20;
}
td {
  border-bottom: solid 2px lightgray;
}
tr:last-child td {
  border: none!important;
}
.overlimit {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="postBox">
  <center>
    <input type="text" id="status" name="post" maxlength="150" /> <span id="text_counter"></span>

    <br>
    <br/>
    <button style="border : solid 0px #000080; border-radius : 4px; moz-border-radius : 4px; -webkit-box-shadow : 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0); box-shadow : 0px 0px 5px rgba(0,0,0,1.0); font-size : 24px; font-style : ;color : #ffffff; padding : 4px 10px; background-color : #000080;">subpost</button>
    <br/>
    <br/>
    <table name="rows" class="postTable"></table>
    <td></td>
    <tr></tr>
  </center>
</div>

＆＃13;

Answer 4

尝试在页面onload事件中添加此内容： $(document).ready(function(){$('#status').focus(left=(150-inpt.value.length));}); 在该代码段中，我假设您的文本框的ID是＆＃34; status＆＃34;和＆＃34;左＆＃34;被声明为全局变量。我无法尝试你的代码。我觉得小提琴现在很有趣。

单击按钮时重置字符倒计时

4 个答案: