首页 > 编程 > JavaScript > 正文

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

2019-11-19 17:46:44
字体:
来源:转载
供稿:网友

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输入框值的实时变化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表