單擊按鈕重置字符倒計時

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為“狀態”，而“左”則聲明為全局變量。 我無法嘗試您的代碼擺弄。 我認為小提琴現在表現得很滑稽。