高级前端
dom
【Q214】input 中监听值的变化是在监听什么事件

input 中监听值的变化是在监听什么事件

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 215 (opens in a new tab)

Author 回答者: shfshanyue (opens in a new tab)

可以实时监听值的变化的事件有以下几种

  • keypress
  • keydown
  • keyup
  • input

注: onChange 无法做到实时监听,因为 onChange 需要失去焦点才能触发

Author 回答者: sunhua-2217 (opens in a new tab)

oninput不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到

Author 回答者: qixMan (opens in a new tab)

onchange:

Supported HTML tags:

<input type="checkbox">, <input type="file">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="text">, <select> and <textarea>

The onchange attribute fires the moment when the value of the element is changed.

Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on function onPropertyChange(event){console.log(event.srcElement.value)}

ie10以上 function onInput(event){console.log(event.srcElement.value)}

Author 回答者: w1687021088 (opens in a new tab)

input 事件

Author 回答者: huiaixing (opens in a new tab)

oninput实时触发,onchange失去焦点时触发