如何使用jQuery顯示實時字符數？

請檢查下面的代碼。我想用jquery javascript實時顯示輸入字符數。但問題是，當我做它與「textarea」它的作品，但是當我做同樣的正常輸入類型文本它不工作。如何使用jQuery顯示實時字符數？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
     <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script> 
</head> 
<body> 

<!-- Works --> 

<!-- <textarea></textarea> 
<span id="characters"><span> 

    <script type='text/javascript'> 
     $('textarea').keyup(updateCount); 
     $('textarea').keydown(updateCount); 

     function updateCount() { 
      var cs = $(this).val().length; 
      $('#characters').text(cs); 
     } 
    </script> --> 

<!-- Not works --> 

<input type="text" name="name"> 
<span id="characters"><span> 

<script type='text/javascript'> 
     $('text').keyup(updateCount); 
     $('text').keydown(updateCount); 

     function updateCount() { 
      var cs = $(this).val().length; 
      $('#characters').text(cs); 
     } 
</script> 

</body> 
</html>

來源

2017-08-09 Nix Li

'text'不是一個有效的選擇器。 – RRK

用「文本區域」版本您選擇「文本區域」由$('textarea').keyup(updateCount)和 $('textarea').keydown(updateCount)很好，但與文字輸入你做錯了選擇輸入文本。

我已經通過在輸入文本上放置一個名爲「foo」的ID來修復它。這應該現在工作。

<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script> 
 
    <input type="text" id="foo" name=""> 
 
    <span id="characters"><span> 
 
    
 
    \t <script type='text/javascript'> 
 
      $('#foo').keyup(updateCount); 
 
      $('#foo').keydown(updateCount); 
 
    
 
      function updateCount() { 
 
       var cs = $(this).val().length; 
 
       $('#characters').text(cs); 
 
      } 
 
     </script>

來源

2017-08-09 12:42:17

如果你想獲得與該類型的文本輸入，你必須使用一個選擇這樣

$('input[type="text"]').keyup(updateCount); 
$('input[type="text"]').keydown(updateCount);

這裏是所有jQuery selectors

來源

2017-08-09 12:45:32 y0hami

這裏列表是一個工作小提琴結合您的兩個事件keyup和到one line :-)

您的選擇錯了，text不存在。所以，我呼籲input[name="name"]，而不是由你的name值來獲得輸入：

$('input[name="name"]').on('keyup keydown', updateCount); 
 

 
function updateCount() { 
 
    $('#characters').text($(this).val().length); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="name"> 
 
<span id="characters"><span>

來源

2017-08-09 12:46:26 hallleron

你是不是在這裏選擇輸入字段。
請嘗試以下

$('input').keyup(updateCount); 
$('input').keydown(updateCount);

來源

2017-08-09 12:48:30 Girish007

在這裏，你去了一個解決方案https://jsfiddle.net/mLb41vpo/

$('input[type="text"]').keyup(updateCount); 
 

 
function updateCount() { 
 
    var cs = $(this).val().length; 
 
    $('#characters').text(cs); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" name=""> 
 
<span id="characters"><span>

錯是$('text').keyup(updateCount);，您可以使用 '文本' 是指輸入文本框。

應該$('input').keyup(updateCount);

來源

2017-08-09 12:48:51 Shiladitya

$("input").keyup(function(){ 
 
$("#characters").text($(this).val().length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="name"> 
 
<span id="characters"><span>

來源

2017-08-09 13:08:31

一切都在你的代碼是正確的，你只需要添加「：」你beore類型。這將使它識別，它是輸入類型。

例子：

<script type='text/javascript'> 
     $(':text').keyup(updateCount); 
     $(':text').keydown(updateCount); 

     function updateCount() { 
      var cs = $(this).val().length; 
      $('#characters').text(cs); 
     } 
</script>

我只是改變了你的腳本。只要找到變化，你就會得到它。

來源

2017-08-09 13:10:25

如何使用jQuery顯示實時字符數？

回答

相關問題