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

下面小编就为大家带来一篇js监听input输入框值的实时变化实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。…

下面小编就为大家带来一篇js监听input输入框值的实时变化实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

例:

 

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

 

3、使用jQuery方法绑定事件

 

在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称,event.propertyName

实例1:

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

以上就是js监听input输入框值的实时变化实例的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部