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 相关文章推荐
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
瀑布流布局代码一例
Apr 11 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
javascript数组去重方法分析
Dec 15 Javascript
js实现简单数字变动效果
Nov 06 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
小程序实现上传视频功能
Aug 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
Table冻结表头示例代码
2013/08/20 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
js中less常用的方法小结
2017/08/09 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
python线程池的实现实例
2013/11/18 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python教程之全局变量用法
2016/06/27 Python
Python程序中设置HTTP代理
2016/11/06 Python
python rsa 加密解密
2017/03/20 Python
python 常用的基础函数
2018/07/10 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python3.8下载及安装步骤详解
2020/01/15 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
大学学年自我鉴定
2013/10/28 职场文书
个人自我鉴定写法
2013/11/30 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
文明单位汇报材料
2014/12/24 职场文书
2015年调度员工作总结
2015/04/30 职场文书