Jquery实时监听input value的实例


Posted in Javascript onJanuary 26, 2017

实例如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body id="lia-body"> 
  <div class="lia-content"> 
    <div class="inputwrapper"> 
      <label><span>姓名:</span><input type="text" name="fullname"></label> 
      <div class="result"></div> 
    </div> 
  </div> 
  <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> 
  <script> 
    $(function(){ 
      var $inputwrapper = $('#lia-body .lia-content .inputwrapper'); 
      $inputwrapper.find('input').on('input propertychange',function(){ 
        var result = $(this).val(); 
        console.log(result); 
        $inputwrapper.find('.result').html(result); 
      }); 
    }) 
  </script> 
</body> 
</html>

onchange触发事件必须满足两个条件:

1)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

2)当前对象失去焦点(onblur);

onpropertychange

只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

oninput是onpropertychange的非IE版本,支持firefox和opera等浏览器

但不同的是,它绑定于对象时,并非该对象所有属性改变都能触发事件,只有在对象的value值发生改变时才会生效。

这里我们用来监听input value的改变再好不过了。

以上这篇Jquery实时监听input value的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
js动态引入的四种方法
May 05 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
实现vuex原理的示例
Oct 21 Javascript
jquery实时获取时间的简单实例
Jan 26 #Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 #Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 #Javascript
assert()函数用法总结(推荐)
Jan 25 #Javascript
canvas知识总结
Jan 25 #Javascript
基于JavaScript实现自定义滚动条
Jan 25 #Javascript
基于javascript实现数字英文验证码
Jan 25 #Javascript
You might like
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
实例分析js事件循环机制
2017/12/13 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
javascript History对象原理解析
2020/02/17 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
网络安全类面试题
2015/08/01 面试题
办护照工作证明范本
2014/01/14 职场文书
法院信息化建设方案
2014/05/21 职场文书
街道社区活动报告
2015/02/05 职场文书