根据我的经验,input type="text" onchange事件通常只发生在你离开(模糊)控件之后。

有办法迫使浏览器触发onchange每次文本字段内容的变化?如果不是,那么“手动”跟踪这种情况的最佳方法是什么?

使用onkey* events是不可靠的,因为您可以右键单击字段并选择粘贴,这将在没有任何键盘输入的情况下更改字段。

setTimeout是唯一的方法吗?丑:-)


当前回答

请,判断下一个方法使用JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function() {
    $(this).blur();
    $(this).focus();
});

$("#inputId").change(function() {
    // Do whatever you need to do on actual change of the value of the input field
});

其他回答

请,判断下一个方法使用JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function() {
    $(this).blur();
    $(this).focus();
});

$("#inputId").change(function() {
    // Do whatever you need to do on actual change of the value of the input field
});

方法一:为输入添加事件监听器:

element.addEventListener("input", myFunction);

 

方法2:用JavaScript定义oninput属性:

element.oninput = function()
{
    myFunction();
};

 

方法3:用HTML定义oninput属性:

<input type="text" oninput="myFunction();">

我认为在2018年最好使用输入事件。

-

正如WHATWG规范所描述的(https://html.spec.whatwg.org/multipage/indices.html#event-input-input):

当用户更改值时向控件触发(参见 改变事件)

-

下面是一个如何使用它的例子:

<input type="text" oninput="handleValueChange()">

有一个相当接近的解决方案(不修复所有粘贴方式),但他们中的大多数:

它适用于输入以及文本区域:

<input type="text" ... >
<textarea ... >...</textarea>

这样做:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

就像我说的,不是所有的方法都可以在所有浏览器上粘贴一个事件…最糟糕的是,有些根本不发射任何事件,但定时器是可怕的用于这样。

但大多数粘贴方式是通过键盘和/或鼠标完成的,所以通常粘贴后会触发onkeyup或onmouseup,在键盘上输入时也会触发onkeyup。

确保你检查代码不花太多时间…否则会给用户留下不好的印象。

是的,诀窍是对键和鼠标开火…但要小心两者都可能被解雇,所以要记住这一点!!

这些天听oninput。感觉就像在改变,而不需要失去对元素的关注。它是HTML5。

除了IE8及以下版本,所有人(甚至是移动设备)都支持它。为IE添加onpropertychange。我是这样使用的:

const source = document.getElementById('source'); const result = document.getElementById('result'); const inputHandler =函数(e) { 结果。innerHTML = e.target.value; } 源。addEventListener(“输入”,inputHandler); 源。addEventListener (propertychange, inputHandler);//用于IE8 // Firefox/Edge18-/IE9+不启动<select><option> . // / /源。addEventListener(‘改变’,inputHandler); <输入id = "源" > < div id = "结果" > < / div >