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 相关文章推荐
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
JS获取地址栏参数的小例子
2013/08/23 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
python在控制台输出进度条的方法
2015/06/20 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
python编写简单端口扫描器
2019/09/04 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
关于礼仪的演讲稿
2014/01/04 职场文书
委托书英文
2015/01/28 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
企业工会工作总结2015
2015/05/13 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Oracle中update和select 关联操作
2022/01/18 Oracle
python实现手机推送 代码也就10行左右
2022/04/12 Python