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入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery选择器实例应用
Jan 05 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
使用 JavaScript 制作页面效果
Apr 21 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实现数组筛选奇数和偶数示例
2014/04/11 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
js三种排序算法分享
2012/08/16 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
对javascript继承的理解
2016/10/11 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
家长写给老师的建议书
2014/03/13 职场文书
求职自我评价范文100字
2014/09/23 职场文书
入党介绍人意见2015
2015/06/01 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Win11更新失败并提示0xc1900101
2022/04/19 数码科技