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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JS实现简单打字测试
Jun 24 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
聊天室php&amp;mysql(六)
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP实现的json类实例
2015/07/28 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
JS操作数据库的实例代码
2013/10/17 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jquery延迟对象解析
2016/10/26 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
vue-iview动态新增和删除的方法
2020/06/17 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
python 实现插入排序算法
2012/06/05 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
深入解析Python中的上下文管理器
2016/06/28 Python
python实现感知器
2017/12/19 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
AJAX都有哪些有点和缺点
2012/11/03 面试题
项目经理的岗位职责
2013/11/23 职场文书
团队精神口号
2014/06/06 职场文书
学校运动会广播稿
2014/10/11 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
Python机器学习之基础概述
2021/05/19 Python