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多浏览器捕捉回车事件代码
Jun 22 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
react基本安装与测试示例
Apr 27 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
初识javascript 文档碎片
2010/07/13 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
常用的js方法合集
2017/03/10 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python控制台显示时钟的示例
2014/02/24 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
在django中自定义字段Field详解
2019/12/03 Python
python把一个字符串切开的实例方法
2020/09/27 Python
python实现定时发送邮件
2020/12/23 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
Foreo国际站:Foreo International
2018/10/29 全球购物
优秀团员个人事迹材料
2014/01/29 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
七一讲话心得体会
2014/09/05 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
导游词欢迎词
2015/02/02 职场文书
鸡毛信观后感
2015/06/11 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书