如何显示文本框剩余的字符？

Question

我想在我的代码中实现一个最多允许 150 个字符的简单文本框。那部分相对容易。现在，我如何才能显示我的文本框中还剩下多少个字符？

例子：

<textarea  maxlength="150" rows="5" cols="50" wrap="hard">
    In 150 characters or less, tell me something about yourself...
</textarea>

Answer 1

您可以将input 事件附加到您的textarea，然后每次用户键入或删除一个字符时，您都可以执行 (max - current_characters) 操作并在一个范围内显示结果：

var max = 150;
var textarea = document.querySelector('textarea');
var info = document.querySelector('#info');

//Init the count for the first time
info.textContent = max - textarea.value.length;

textarea.addEventListener('input', function() {
  info.textContent = max - this.value.length;
})

<textarea maxlength="150" rows="5" cols="50" wrap="hard">

In 150 characters or less, tell me something about yourself...

</textarea>
<br> Remaining <span id="info"></span> characteres

Answer 2

获取框值并将其从您拥有的最大长度中休息：

 let message = document.getElementById('messageBox').value;
 let value =  150;
 var length = value - message;

随意使用长度变量。

这是我前段时间做的一个例子，它甚至可以改变它的颜色，并用正则表达式确定是否有空格：

 // Reads the text area value.
 let message = document.getElementById('messageBox').value;

if((character.length <= 0 || !(/[^\s]/.test(message))) && character.length <= 280){
 // Disables submit button.
 sumbitStatus(true);
 // Sets invisible the message of more than 280 characters.(In case the user select and delete the whole message in one move).
 document.querySelector('.advertisement').style.display =  "none";
 // returns counter to blue color.(In case the user select and delete the whole message in one move).
 document.querySelector('.character').style.color = '#1EAEDB';
 } else if(character.length >= 281){
   // Disables submit button and changes counter to red.
   sumbitStatus(true); 
   document.querySelector('.character').style.color = 'red';
   // Set visible the message of more than 280 characters.
   document.querySelector('.advertisement').style.display = 'block';
  } else{
     // Enables Submit button and returns counter to blue color.
     sumbitStatus(false); 
     if(character.length >= 250){
     document.querySelector('.character').style.color = 'orange';
     // Sets invisible the message of more than 280 characters.
     document.querySelector('.advertisement').style.display = "none";
     }
     else{
     document.querySelector('.character').style.color = '#1EAEDB';
     // Sets invisible the message of more than 280 characters.
     document.querySelector('.advertisement').style.display = "none";
     }
    }  
   }