js监听input输入框值的实时变化实例

1、在元素上同时绑定 oninput 和onporpertychanger事件
例：

<script type="text/JavaScript">function aa（e）{alert（"inputting！！"）;}</script><input type="text" id="a" oninput="aa（event）" onporpertychange="aa（event）" />

2、使用原生js添加监听事件

<script type="text/javascript"> $（function（）{if（"v"=="v"）{//true为IE浏览器，感兴趣的同学可以去搜下，据说是现有最流行的判断浏览器的方法document.getElementById（"a"）.attachEvent（"onporpertychange",function（e）{console.log（"inputting！！"）;}}else{document.getElementById（"a"）.addEventListener（"onporpertychange",function（e）{console.log（"inputting！！"）;}}}）;</script><input type="text" id="a"/>

3、使用jQuery方法绑定事件

<script type="text/javascript"> $（function（）{$（"#a"）.bind（"input porpertychange",function（）{console.log（"e"）;}）;}）;</script><input type="text" id="a"/>

在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称，event.propertyName
实例1：
<input type="text" oninput=" " onpropertychange="" value="Text field" />
实例2：

$（"#name"）.bind（"input porpertychange",function（）{var thisTxt=$（"#name"）.val（）;$（this）.siblings（"p"）.html（thisTxt）}）

实例3：

//手机号码分段显示register.phonePropertychange = function（） {_this = register;_input = $（this）;var v = $（this）.val（）;v = v.replace（new RegExp（/ /g）,""）;var v1 = v.slice（0,3）;var v2 = v.slice（3,7）;var v3 = v.slice（7,11）;if（v2==""）{_input.focus（）.val（v1）;}else if（v3==""）{_input.focus（）.val（v1+" "+v2）;}else{_input.focus（）.val（v1+" "+v2+ " "+v3）;}; //手机号输入完成字体颜色改变if （v.length === 11） {if（_this.regexpPhone（v））{_input.css（"color","#000"）;$（"#btnSendCode"）.addClass（"c-26a949"）;_input.blur（）;;}else{layer.open（{content: "手机号码不正确，请重新输入",time: 2, end:function（）{_input.val（""）;}}）;}}else{_input.css（"color","#26a949"）;}}//验证手机号register.regexpPhone = function（phone）{return /^1[3|4|5|7|8]d{9}$/.test（phone）;}

以上这篇js监听input输入框值的实时变化实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。