jquery 实时监听输入框值变化的完美方法(必看)


Posted in Javascript onJanuary 26, 2017

只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美

$('.input-form :input').bind('input propertychange', function()
{
  //获取.input-form下的所有 <input> 元素,并实时监听用户输入
  //逻辑
})

jquery 实时监听输入框值变化的完美方法(必看)

以上代码在因为用的bind,所以当遇到追加的新input标签时,则不能监听了。

如下情景:

由上图可以看到189和135号码是可以监听的,但是新追加的178和188则无效。

怎么解决这个问题呢?

整了大半天,好吧,用live代替bind即可

$('.input-form :input').live('input propertychange', function()
{
  //获取.input-form下的所有 <input> 元素,并实时监听用户输入
  //逻辑
})

以上这篇jquery 实时监听输入框值变化的完美方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
Jquery实时监听input value的实例
Jan 26 #Javascript
jquery实时获取时间的简单实例
Jan 26 #Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 #Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 #Javascript
assert()函数用法总结(推荐)
Jan 25 #Javascript
canvas知识总结
Jan 25 #Javascript
基于JavaScript实现自定义滚动条
Jan 25 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解AngularJS controller调用factory
2017/05/19 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
python爬虫爬取某站上海租房图片
2018/02/04 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
军训生自我鉴定范文
2013/12/27 职场文书
学校对教师的评语
2014/04/28 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
主持人开场白台词
2015/05/29 职场文书