如何更新附加值？

Question

伙計們，我有輸入文字，當我開始輸入文字時，它會計算出我正在使用的字母數。 但是當我清除輸入值時，無法更改字母計數器。 我怎么才能得到它？ 提前致謝。 的jsfiddle

 function count_letter() { var len = $("#area").val().length; $('#counter').append(len); } $('#area').bind('keyup', function() { $('#counter').html(''); count_letter(); }); $('#clear-value').click(function(){ $("#area").val(" "); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="area"><br> <div id="counter"></div><br> <button id="clear-value"> Clear value </button> 

Answer 1

在#clear-value事件處理程序中，添加：

$('#counter').empty();

這將清除#counter元素。

  function count_letter() { var len = $("#area").val().length; $('#counter').append(len); } $(function() { $('#area').bind('keyup', function() { $('#counter').html(''); count_letter(); }); $('#clear-value').click(function(){ $("#area").val(""); $('#counter').empty(); //<<<----- }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="area"><br> <div id="counter"></div><br> <button id="clear-value"> Clear value </button> 

Answer 2

清除輸入值時只需調用count_letter函數：

$('#clear-value').click(function(){
    $("#area").val(" ");
    $('#counter').html('');
    count_letter();
});

Answer 3

單擊清除值按鈕清除計數器。 參見以下內容： https : //jsfiddle.net/28bs18gq/2/

function count_letter() {
    var len = $("#area").val().length;
    $('#counter').append(len);
    }

  $('#area').bind('keyup', function() {
    $('#counter').html('');
    count_letter();
  });

  $('#clear-value').click(function(){
  $("#area").val(" ");
    $('#counter').html('');
  });