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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 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
smtp邮件发送一例
2006/10/09 PHP
PHP面向对象概念
2011/11/06 PHP
初识laravel5
2015/03/02 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
js右键菜单效果代码
2007/07/21 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
理解Python中的With语句
2015/02/02 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
深入理解Django的中间件middleware
2018/03/14 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python3的pip路径在哪
2020/06/23 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
销售业务员岗位职责
2014/01/29 职场文书
大学生求职信范文
2014/05/24 职场文书
初中家长评语和期望
2014/12/26 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android
Django中celery的使用项目实例
2022/07/07 Python