在输入type="text"中跟踪onchange的最佳方法?

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

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

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

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

当前回答

更新:

参见Another answer(2015)。

2009年原文答案:

你想让onchange事件触发按下键，模糊和粘贴?这是魔法。

如果你想在他们输入时跟踪更改，使用"onkeydown"。如果你需要用鼠标捕捉粘贴操作，请使用“onpaste”(IE, FF3)和“oninput”(FF, Opera, Chrome, Safari1)。

在Safari上<textarea>破碎。使用textInput代替

2009-02-22 14:09:05

其他回答

如果你只使用Internet Explorer，你可以使用这个:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

希望这能有所帮助。

2010-05-19 10:52:32

Javascript在这里是不可预测和有趣的。

Onchange只在模糊文本框时发生 Onkeyup & onkeypress并不总是发生在文本更改 Onkeydown发生在文本更改时(但不能跟踪鼠标点击的剪切和粘贴) Onpaste & oncut发生在键盘，甚至鼠标右键单击。

因此，要跟踪文本框中的变化，我们需要onkeydown, oncut和onpaste。在这些事件的回调中，如果你检查文本框的值，那么你不会得到更新的值，因为该值在回调后发生了变化。因此，解决方案是设置一个超时函数，其超时时间为50毫秒(或更少)，以跟踪更改。

这是一个肮脏的黑客，但据我研究，这是唯一的方法。

这里有一个例子。 http://jsfiddle.net/2BfGC/12/

2012-07-04 09:36:23

“输入”对我很有用。

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

2015-01-19 19:47:48

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

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

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

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

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

2018-06-19 09:28:56

使用oninput而不是onchange。

index . html

<html>
  <head>
    <title>title here</title>
    <script src="index.js"></script>
  </head>
  <body>
    <input oninput="onclickhandler(this)"></input>
  </body>
</html>

script.js

function onclickhandler(e) {
  console.log(e.value);
}

2021-01-15 05:05:24

在输入type="text"中跟踪onchange的最佳方法?

推荐文章

最新文章

标签