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实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
如何使用Strace调试工具
2013/06/03 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php导入导出excel实例
2013/10/25 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
2014年网管工作总结
2014/12/11 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技