使用JQuery(立即)检测对<input type =“ text”>的所有更改

<input type="text">的价值有多种变化方式,包括:

  • 按键
  • 复制粘贴
  • 用JavaScript修改
  • 通过浏览器或工具栏自动完成

我希望我的JavaScript函数在每次更改时都能被调用(使用当前输入值)。我希望立即调用它,而不仅仅是输入失去焦点时。

我正在寻找最干净,最可靠的方法来在所有浏览器中做到这一点(最好使用jQuery)。

用例示例:在Twitter Signup页面上,用户名字段的值显示在其下方的URL“ http:// twitter / username ”中。

达蒙2020/03/23 11:21:27

您可以看到此示例并选择您感兴趣的事件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>
西里Near2020/03/23 11:21:26

您不能只使用<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中实际上无法使用,而我找不到。

猿小小2020/03/23 11:21:26

这是一个我正在实现自动完成变体的工作示例,它填充了一个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>");
            }
        }); 
});
神奇逆天猪猪2020/03/23 11:21:26

好吧,最好的方法是覆盖您自己列出的这三个基础。简单的:onblur,:onkeyup等无法满足您的需求,因此只需将它们组合即可。

KeyUp应该涵盖前两个,并且如果Javascript修改了输入框,那么我当然希望它是您自己的javascript,因此只需在修改它的函数中添加一个回调即可。

路易Jim2020/03/23 11:21:26

绑定到oninput事件似乎在大多数理智的浏览器中都可以正常工作。IE9也支持它,但是实现是有问题的(删除字符时不会触发该事件)。

使用jQuery 1.7+版时,该on方法可用于绑定到如下事件:

$(".inputElement").on("input", null, null, callbackFunction);
泡芙2020/03/23 11:21:26

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