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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
jQuery中库的引用方法
Jan 06 jQuery
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
js实现简单的贪吃蛇游戏
Apr 23 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
Protoss兵种介绍
2020/03/14 星际争霸
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python深入学习之装饰器
2014/08/31 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python实现端口转发器的方法
2015/03/13 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
学习计划书怎么写
2014/09/15 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2015年教务工作总结
2015/05/23 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android