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设置按钮的disabled属性的实现代码
Nov 28 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
jquery实现动态画圆
Dec 04 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
JavaScript 闭包的使用场景
Sep 17 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
如何用php获取文件名后缀
2013/06/09 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python自动发送邮件脚本
2018/06/20 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
村委会换届选举方案
2014/05/03 职场文书
党支部书记岗位职责
2015/02/15 职场文书
污染环境建议书
2015/09/14 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python