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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
js实现tab切换效果
2017/02/16 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
详解redux异步操作实践
2018/08/15 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
利用ctypes提高Python的执行速度
2016/09/09 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python实现简单的文字识别
2018/11/27 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
合同专员岗位职责
2013/12/18 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
九年级语文教学反思
2016/03/03 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL