如何在同一頁面中為多個文本區域顯示字符計數器？

Question

我有一個帶有多個文本區域的 HTML 表單。 我需要限制每個區域的字符數。 我想展示一個櫃台。 我在網上找到了這個：

 $('textarea').keyup(function() { var characterCount = $(this).val().length, current = $('#current'), maximum = $('#maximum'), theCount = $('#the-count'); current.text(characterCount); });

 #the-count { float: right; padding: 0.1rem 0 0 0; font-size: 0.875rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <h1>Displaying The Character Count of a Textarea</h1> <textarea name="the-textarea" id="the-textarea" maxlength="300" placeholder="Start Typin..."autofocus></textarea> <div id="the-count"> <span id="current">0</span> <span id="maximum">/ 300</span> </div> </div>

我的問題：

它適用於 1 個文本區域，但在有多個文本區域時停止工作。 如何轉換 javascript 函數以使其適用於頁面中的任何文本區域和計數器？

Answer 1

您需要對所有輸入執行querySelectorAll ，然后附加一個oninput事件偵聽器，如下所示：

 var textareas = document.querySelectorAll('textarea'); textareas.forEach(textarea => { textarea.addEventListener('input', function() { var charCount = textarea.value.length; var count = textarea.nextElementSibling; count.innerHTML = charCount + ' /300'; }) })

 #count { float: right; padding: 0.1rem 0 0 0; font-size: 0.875rem; }

 <div class="wrapper"> <h1>Displaying The Character Count of a Textarea</h1> <div> <textarea name="textarea" maxlength="300" placeholder="Start Typin..." autofocus></textarea> <div id="count">0 / 300</div> </div> <div> <textarea name="textarea" maxlength="300" placeholder="Start Typin..." autofocus></textarea> <div id="count">0 / 300</div> </div> <div> <textarea name="textarea" maxlength="300" placeholder="Start Typin..." autofocus></textarea> <div id="count">0 / 300</div> </div> </div>

在純 Javascript 中。

Answer 2

ID 應該是唯一的。 給不同的id。 它會起作用。

CSS：

#textCount, #textCount1 {
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}

HTML：

<div class="wrapper">
    <h1>Displaying The Character Count of a Textarea</h1>
    <textarea id="textarea1" maxlength="300" placeholder="Start Typin..."></textarea>
    <div id="textCount1">
        <span id="current1">0</span>
        <span id="maximum1">/ 300</span>
    </div>

    <textarea id="textarea2" maxlength="300" placeholder="Start Typin..."></textarea>
    <div id="textCount2">
        <span id="current2">0</span>
        <span id="maximum2">/ 300</span>
    </div>
</div>

javascript:

$('#textarea1').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current1'),
      maximum = $('#maximum1'),
      theCount = $('#textCount1');
    
  current.text(characterCount);
 
        
});

$('#textarea2').keyup(function() {
    
  var characterCount = $(this).val().length,
      current = $('#current2'),
      maximum = $('#maximum2'),
      theCount = $('#textCount2');
    
  current.text(characterCount);
 
        
});

Answer 3

具有不同maxLength值的多個 Textarea。

id問題也通過將其設置為class解決

從其他答案進行修改。

JSFiddle

代碼

HTML

  <div class="wrapper">
      <h1>Displaying The Character Count of a Textarea</h1>
  <div>
     <textarea name="textarea" maxlength="450" placeholder="Start Typin..." autofocus> </textarea>
    <div class="count">0 / 450</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="400" placeholder="Start Typin..." autofocus></textarea>
    <div class="count">0 / 400</div>
  </div>
  
  <div>
    <textarea name="textarea" maxlength="500" placeholder="Start Typin..." autofocus></textarea>
    <div class="count">0 / 500</div>
  </div>
</div>

Javascript

let textareas = document.querySelectorAll('textarea');

textareas.forEach(textarea => {
  textarea.addEventListener('input', function() {
    let charCount = textarea.value.length;
    let count = textarea.nextElementSibling;
    let maxLength = textarea.maxLength;
    count.innerHTML = charCount + ' / ' + maxLength;
  })
})