HTML5 oninput实时监听输入框值变化的完美方案
2024-08-27 04:56:31
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制、剪贴和粘贴这些操作,处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案:结合html5标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。主流浏览器基本都支持oninput事件,IE9以下不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
- 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
- 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
- 修改了 select 元素的选中项,selectedIndex 属性发生变化。
在监听到onpropertychange事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下:
<head> <script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) { alert ("The new content: " + event.target.value); } // Internet Explorer function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { alert ("The new content: " + event.srcElement.value); } } </script> </head> <body> Please modify the contents of the text field. <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" /> </body>
使用jQuery的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码如下:
$('input').on('input propertychange', function() { alert($(this).val().length + ' characters'); });
最新文章
- Android学习--自己在使用HttpConnection时遇到的EOFException
- 原生js完成拼图小游戏
- Eclipse开发快捷键技巧
- .NET笔试题集(二)
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
- 如何给caffe添加新的layer ?
- sql 游标例子 根据一表的数据去筛选另一表的数据
- 让你的字ScrollView、ListView充分伸展
- PHP_零基础学php_2变量、预定义变量、预定义常量、表达式、运算符、程序控制流程
- NOIP 2001 提高组 题解
- dede织梦怎么修改description的字数
- 在Vue项目中 选择图片并预览
- C/C++ 多线程机制
- 012_如何清除DNS缓存
- Paget Object 设计模式编写selenium测试用例
- [Java初探08]__简单学习Java类和对象
- iis7错误提示An error occurred on the server when processing the URL...
- $.post 提示错误: Uncaught SyntaxError: Unexpected token :
- python基础===两个list之间移动元素
- ip分包研究-以UDP为例