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 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
js读写json文件实例代码
Oct 21 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
js基于canvas实现时钟组件
Feb 07 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正确配置mysql(apache环境)
2011/08/28 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
Python中序列的修改、散列与切片详解
2017/08/27 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
党员承诺书怎么写
2014/05/20 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
税务会计岗位职责
2015/04/02 职场文书
朋友聚会开场白
2015/06/01 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫