代码之家 › 专栏 › 技术社区 › Ilya Birman

键入input type=“text”时跟踪onchange的最佳方法?

html-form html javascript

360

Ilya Birman · 技术社区 · 16 年前

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

有没有办法强制浏览器触发 换上 每一次 textfield 内容更改?如果没有,最优雅的跟踪方式是什么?

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

是 setTimeout 唯一的办法?…丑陋的:

14 回复 | 直到 6 年前

232

Community CDub 8 年前

更新:

见 Another answer (2015)。

2009年原始答案:

所以,你想要 onchange 按下键时要触发的事件,模糊, 和粘贴?那太神奇了。

如果要跟踪键入的更改,请使用 "onkeydown" . 如果需要用鼠标捕捉粘贴操作,请使用 "onpaste" ( IE , FF3 ) "oninput" ( FF, Opera, Chrome, Safari ^一 )

^一 _{破碎的

<textarea>

狩猎旅行。使用

textInput

相反}

515

Robert Siemer 6 年前

这些天听着 oninput . 感觉就像 onchange 不需要对元素失去关注。它是HTML5。

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

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough

<input id="source" />
<div id="result"></div>

Sanket Sahu 12 年前

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

onchange 仅在模糊文本框时发生
onkeyup 和; onkeypress 文本更改时不总是发生
onkeydown 文本更改时发生(但不能用鼠标单击跟踪剪切和粘贴)
onpaste 和; oncut 使用按键甚至鼠标右键单击时发生。

因此,要跟踪文本框中的更改,我们需要 键控下 , OnCutt 和 上浆 .在这些事件的回调中,如果选中文本框的值,则不会得到更新的值,因为回调后更改了值。因此,解决这个问题的方法是设置一个超时函数,它的超时为50毫秒(或者更短),以跟踪更改。

这是一个肮脏的黑客,但这是唯一的方法,正如我所研究的。

下面是一个例子。 http://jsfiddle.net/2BfGC/12/

Arnaud 9 年前

下面的代码对我使用jquery 1.8.3很好

HTML: <input type="text" id="myId" />

javascript/jquery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Lucky 9 年前

onkeyup 例如,我按 t 当我举起手指时,动作发生了,但是 keydown 这个动作发生在我给角色数字之前 T

希望这对某人有帮助。

所以 通键 当你想发送你刚输入的内容时,最好是现在。

Mohnish 9 年前

我也有类似的要求(Twitter风格的文本字段)。使用 onkeyup 和 onchange . 换上 实际上,在丢失视场焦点的过程中要处理鼠标粘贴操作。

[更新] 在HTML5或更高版本中,使用 oninput 获取实时的字符修改更新,如上面其他答案中所述。

RolandDeschain 15 年前

如果仅使用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>

希望有帮助。

z666zz666z 13 年前

有一个非常接近的解决方案(不要修复所有粘贴方式),但其中大部分:

它既适用于输入,也适用于文本区域:

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

这样做:

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

正如我所说,并不是所有方法都能在所有浏览器上粘贴Fire事件…最糟糕的是,有些人根本不触发任何事件,但计时器却很难用于此类事件。

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

确保您的检查代码不会花费太多时间…否则用户的印象会很差。

是的,诀窍是在钥匙和鼠标上开火…但要注意两个都可以被解雇,所以要记住这样!!!!

Alex Uke 12 年前

请使用jquery判断下一个方法:

HTML:

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

javascript(jquery):

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

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

JTG 10 年前

“输入”对我有效。

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

Patrick Hillert 6 年前

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

如技术规范所述( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

当用户更改值时在控件上激发(另请参见这个 change event )

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

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

Gumbo 16 年前

你可以用 keydown , keyup 和 keypress 事件也是如此。

Venkat 10 年前

要跟踪每一个,请尝试本例,并在此之前将光标闪烁率完全降低为零。

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur:事件在退出时生成

onchange:如果在inputText中进行了任何更改,则在退出时生成事件

onkeydown:任何按键都会生成事件(也适用于长时间保持按键)

onkeyup:在任何密钥释放时生成事件

onkeypress:与onkeydown(或onkeydup)相同,但不会对ctrl、backspace、alt-other做出反应。

a20 7 年前

在这里,我要做的是:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

如果你能指出这种方法的缺陷,我将不胜感激。