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 相关文章推荐
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
详解node.js 事件循环
Jul 22 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
JS简单获得节点元素的方法示例
2018/02/10 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
pygame实现简易飞机大战
2018/09/11 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python pandas库的安装和创建
2019/01/10 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python调用其他文件函数或类的示例
2019/07/16 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
关于礼仪的演讲稿
2014/01/04 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript