在Javascript中动态显示长度类型(Dynamically display length as type in Javascript)

在Javascript中动态显示长度类型(Dynamically display length as type in Javascript)

所以我想在输入时动态显示长度，但不知道如何去做。 必须使用键入或删除的每个字母进行更新。 例如“Iam”长度= 3“Ia”长度= 2当然，我可以通过单击按钮或按Enter键静态地执行此操作，但我希望在键入时发生这种情况。 请帮忙

So I want to dynamically display the length as I type, but haveno idea how to go about it. It must update with every letter that is typed or deleted. For example "Iam" Length=3 "Ia" Length = 2 Of course I can do this statically by clicking a button or pressing enter, but I want this to happen as I type. Please help

最满意答案

更新：

输入事件有点不完整，所以请改用keyup事件。

这是更新的jsfiddle 。

谢谢@robg，在评论中提醒我。

---

原答案：

您可以在<input>或<textarea>元素上使用input事件。 与change事件不同，当<input>或<textarea>元素的值发生更改时，将同步触发DOM输入事件。

var input = document.querySelector('input');
var p = document.querySelector('p');
var i = 0;
input.addEventListener('input', function() {
  p.innerHTML = input.value.length;
}) 
  
<input/>
<p>The length of the value</p> 
  
 
 
 这是一个jsfiddle 
Update: 
 
input event is a bit patchy so use keyup event instead. 
 
Here is the updated jsfiddle. 
 
Thanks, @robg, for reminding me in the comment. 
 
 
Original Answer:
 
You can use input event on an <input> or <textarea> element. Different from change event, the DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed. 
 
 
 
  
  
var input = document.querySelector('input');
var p = document.querySelector('p');
var i = 0;
input.addEventListener('input', function() {
  p.innerHTML = input.value.length;
}) 
  
<input/>
<p>The length of the value</p> 
  
 
 
Here is a jsfiddle