HTML5 input事件检测输入框变化
程序员文章站
2022-05-21 15:58:53
之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西...
之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢,接下来就来给大家介绍一下:
如果我们页面上有这样一个简单到极致的输入框:
1 <input type="text">
那么我们现在用jquery给它绑定input事件,如下:
1 $("input:text").bind("input propertychange",function(){ 2 3 console.log($(this).val().length);//打印输入框字符长度 4 5 });
这样一来只要输入框内容发生变化,都会立即打印出里面字符串的长度来了。
需要注意的是input事件是html5的东东,IE9以下版本中是无法支持的,所以需要用propertychange事件来代替。
input事件除了能够监听input:text元素的内容变化,同时还可以监听input:password,input:search以及textarea这几个元素,在html绑定的写法为:
1 <input type="text" oninput="onInput(event)" onpropertychange="onPropertyChange(event)">
上一篇: 在日常生活中香蕉能做什么呢
推荐阅读
-
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
-
jquery实现input输入框实时输入触发事件代码
-
html5 input输入实时检测以及延时优化
-
oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
-
实时监听input输入框value的变化:
-
HTML5 input事件检测输入框变化
-
js监听input输入框值的实时变化实例
-
HTML5 新增的 input 事件
-
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
-
实时监听input输入框value的变化: