<input type="text">罐的价值有多种变化方式,包括:
- 按键
- 复制粘贴
- 用JavaScript修改
- 通过浏览器或工具栏自动完成
我希望我的JavaScript函数在每次更改时都能被调用(使用当前输入值)。我希望立即调用它,而不仅仅是输入失去焦点时。
我正在寻找最干净,最可靠的方法来在所有浏览器中做到这一点(最好使用jQuery)。
用例示例:在Twitter Signup页面上,用户名字段的值显示在其下方的URL“ http:// twitter / username ”中。
<input type="text">罐的价值有多种变化方式,包括:
我希望我的JavaScript函数在每次更改时都能被调用(使用当前输入值)。我希望立即调用它,而不仅仅是输入失去焦点时。
我正在寻找最干净,最可靠的方法来在所有浏览器中做到这一点(最好使用jQuery)。
用例示例:在Twitter Signup页面上,用户名字段的值显示在其下方的URL“ http:// twitter / username ”中。
您不能只使用<span contenteditable="true" spellcheck="false">element代替<input type="text">吗?
<span>(具有contenteditable="true" spellcheck="false"as属性)的区别<input>主要在于:
<input>。value属性,但是文本被渲染为文本innerText并成为其内部主体的一部分。 <input>尽管您设置了属性,但不是multiline="true"。当然,要实现外观,您可以使用CSS对其进行样式设置,而在编写值的同时innerText获得一个事件:
这是一个小提琴。
不幸的是,有些东西在IE和Edge中实际上无法使用,而我找不到。
这是一个我正在实现自动完成变体的工作示例,它填充了一个jqueryui选择器(列表),但我不希望它的功能与执行下拉菜单的jqueryui自动完成功能完全相同。
$("#tagFilter").on("change keyup paste", function() {
var filterText = $("#tagFilter").val();
$("#tags").empty();
$.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
function(data) {
var i;
for (i = 0; i < data.length; i++) {
var tag = data[i].value;
$("#tags").append("<li class=\"tag\">" + tag + "</li>");
}
});
});
好吧,最好的方法是覆盖您自己列出的这三个基础。简单的:onblur,:onkeyup等无法满足您的需求,因此只需将它们组合即可。
KeyUp应该涵盖前两个,并且如果Javascript修改了输入框,那么我当然希望它是您自己的javascript,因此只需在修改它的函数中添加一个回调即可。
绑定到oninput事件似乎在大多数理智的浏览器中都可以正常工作。IE9也支持它,但是实现是有问题的(删除字符时不会触发该事件)。
使用jQuery 1.7+版时,该on方法可用于绑定到如下事件:
$(".inputElement").on("input", null, null, callbackFunction);
jQuery> = 1.9的实时花式解决方案
$("#input-id").on("change keyup paste", function(){
dosomething();
})
如果您还想检测“点击”事件,只需:
$("#input-id").on("change keyup paste click", function(){
dosomething();
})
如果您使用的是jQuery <= 1.4,请使用live代替on。
您可以看到此示例并选择您感兴趣的事件: