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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
JavaScript 乱码问题
Aug 06 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
js中top的作用深入剖析
Mar 04 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 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四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
9个比较实用的php代码片段
2016/03/15 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python找出因数与质因数的方法
2019/07/25 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
寄语学生的话
2014/04/10 职场文书
二年级学生评语大全
2014/04/23 职场文书
地陪导游欢迎词
2015/01/26 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
2019求职信大礼包
2019/05/15 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL
Nginx报404错误的详细解决方法
2022/07/23 Servers