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 设计模式学习 Singleton
Jul 27 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
子页向父页传值示例
Nov 27 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
vue生命周期实例小结
Aug 15 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python with的用法
2014/08/22 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python正则表达式的使用
2017/06/12 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python 消费 kafka 数据教程
2019/12/21 Python
python之生成多层json结构的实现
2020/02/27 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
初学者学习Python好还是Java好
2020/05/26 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
Python的两道面试题
2013/06/29 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
质量月活动策划方案
2014/03/10 职场文书
主题教育活动总结
2014/05/05 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
中秋晚会活动方案
2014/08/31 职场文书
天下第一关导游词
2015/02/06 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python