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

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

重新声明一下

var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("post")[0];

btn.onclick = function () {
    if (!inpt.value) alert("Please enter something to post.");

    if (inpt.value.length < 10) {
        alert("Post must be at least 10 characters.");
        return false;
    } else {

    } 

    var tbl = document.getElementsByTagName("table")[0];
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    var txt = document.createTextNode(inpt.value);
    cell.appendChild(txt);
    tbl.insertRow(0);
    tbl.insertRow(0);

    inpt.value = "";
     $('#text_counter').text(150);

};

$(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('Characters left: ' + left);
    });
});

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

});

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

});

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;
}

<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>

Answer 4

尝试在您的页面 onload 事件中添加此内容： $(document).ready(function(){$('#status').focus(left=(150-inpt.value.length));}); 在该代码段中，我假设您的文本框的 id 是“status”并且“left”被声明为全局变量。我不能尝试你的代码来摆弄。我认为小提琴现在表现得很有趣。