<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
当前回答
jQuery >= 1.7的实时解决方案已经启动
$("#input-id").on("change keyup paste", function(){
dosomething();
})
如果你还想检测“点击”事件,只需:
$("#input-id").on("change keyup paste click", function(){
dosomething();
})
如果你使用jQuery <= 1.6,使用bind或live代替on。
其他回答
jQuery >= 1.7的实时解决方案已经启动
$("#input-id").on("change keyup paste", function(){
dosomething();
})
如果你还想检测“点击”事件,只需:
$("#input-id").on("change keyup paste click", function(){
dosomething();
})
如果你使用jQuery <= 1.6,使用bind或live代替on。
你就不能用<span contenteditable="true" spellcheck="false">元素来代替<input type="text">吗?
<span>(以contenteditable="true" spellcheck="false"作为属性)与<input>区别很大,主要是因为:
它的样式不是<input>。 它没有value属性,但文本被呈现为innerText,并成为其内部主体的一部分。 它是multiline,而<input>不是,尽管你设置了属性multiline="true"。
要完成外观,当然,你可以用CSS样式,而将值写成innerText,你可以为它获得一个事件:
这是小提琴。
不幸的是,有一些东西在IE和Edge中实际上不起作用,我无法找到。
下面是一个不使用jQuery的解决方案(它真的很过时,现在没有必要了)
使用事件“input”,你可以查找任何类型的变化:
删除,后退,粘贴,输入,任何会改变输入值的东西。
输入事件与文本输入直接相关。当文本以任何方式被更改时,输入就会被分派。
document.querySelector(“# testInput”)。addEventListener(“输入”,测试); 功能测试(e) { var a = document.getElementById('output'); a.innerText += "检测到更新!\n"; } <输入id = " testInput " > < br > <一个id = "输出" > < / >
您可以简单地识别表单中的所有更改者,如下所示
//when form change, show aleart
$("#FormId").change(function () {
aleart('Done some change on form');
});
虽然这个问题是10年前发布的,但我认为它仍然需要改进。这就是我的解。
$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
// Do something here
});
这个解决方案的唯一问题是,它不会触发从javascript的值改变,如$('selector')。瓦尔(“价值”)。当你从javascript中改变值时,你可以触发任何事件到你的选择器。
$(selector).val('some value');
// fire event
$(selector).trigger('change');
或者排成一行
$(selector).val('some value').trigger('change');