Js/jQuery方法实现实时监听input输入框值变化

2019年05月07日 06:33:19益点益滴4992

网页前端开发经常需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,采用onchange时间往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。我们来看一下不同事件在不同浏览器中的表现:

onpropertychange: IE中HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。

oninput:主要是针对onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,不同的是它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

onchange: (a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);(b)当前对象失去焦点(onblur);

jQuery方法

$("#input1").bind("input propertychange",function(event){
       console.log($("#input1").val())
});

原生JavaScript方法

<script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer 9+
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
 </script>
 <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field">

注:以上方法同样适用于textarea文本框。

超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]