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提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
js实现可爱的气泡特效
Sep 05 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php session应用实例 登录验证
2009/03/16 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
int在python中的含义以及用法
2019/06/27 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Django中使用Celery的方法步骤
2020/12/07 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
音乐系毕业生自荐信
2013/10/27 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
个人主要事迹材料
2014/08/26 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书