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


Posted in Javascript onJanuary 26, 2017

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

Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 #Javascript
Jquery实时监听input value的实例
Jan 26 #Javascript
jquery实时获取时间的简单实例
Jan 26 #Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 #Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 #Javascript
assert()函数用法总结(推荐)
Jan 25 #Javascript
You might like
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php时间函数用法分析
2016/05/28 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python多线程实现TCP服务端
2019/09/03 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
基层党支部整改方案
2014/10/25 职场文书
九寨沟导游词
2015/02/02 职场文书
学生不参加考试检讨书
2015/02/19 职场文书