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 import css实例代码
Jul 18 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
es6数组includes()用法实例分析
Apr 18 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP处理会话函数大总结
2015/08/05 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
javascript 写类方式之七
2009/07/05 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python set内置函数的具体使用
2019/07/02 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
艺术系应届生的自我评价
2013/10/19 职场文书
企业厂务公开实施方案
2014/03/26 职场文书