input propertyChange
結合 HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化。
oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發生的內容變化非常有用，在內容修改後立即被觸發，不像 onchange 事件需要失去焦點才觸發。oninput 事件在主流瀏覽器的兼容情況如下：
從上面表格可以看出，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 兩個事件就可以了，示例代碼如下：
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
input propertyChange的更多相关文章
- 总结一下 input propertychange
最近做的一些项目,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. ========================================================== ...
- 巧用 即刻搜索事件 input propertychange 监听输入框字数
实时监听输入框的字数,大于200时,不再输入. 即时搜索: propertychange(ie)和input事件(常用) input是标准的浏览器事件,一般应用于input元素,当input的valu ...
- input propertychange(1)
input type=“text” 通过js改变输入框的value值是不会出发input propertychange事件
- 'input propertychange' 当输入框文字改变时触发的事件!
$('.amount_input').bind('input propertychange', function() { console.log(2); $('.list label').remove ...
- 即时反应的input和propertychange方法
在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...
- input实时监听(input oninput propertychange onpropertychange)
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- input 输入框 propertychange
做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...
- input事件在进行模糊搜索时，用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)
做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...
- 使input文本框随其中内容而变化长度的方法
最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
随机推荐
- CentOS设置sendmail发件人，让sendmail不显示通过XXX代发
0.有一个十分快速的方法 命令:hostname itzhanzhang.com,但是重启后会失效,于是请接着往下看一劳永逸的方法: 1.设置你的主机名 默认的主机名是类似于“VM_24_76_cen ...
- spring boot 多层级mapper
mapper目录结构: mapper ----dev -------produce 在 application.properties 文件中配置 mybatis.mapper-location ...
- zookeeper 批量启动的脚本
#!/bin/shecho "start zkServer"for i in 2 3 4dossh mini$i "source /etc/profile;/usr/l ...
- Linux Linux系统管理命令
df 检测文件系统的磁盘空间占用和空余情况 --用于检测文件系统的磁盘空间占用和空余情况,可以显示所有文件系统对接点和磁盘块的使用情况 --df [参数] --常用参数及含义 "-a&quo ...
- Spring MVC生成RSS源
下面的示例演示如何使用Spring Web MVC框架生成RSS源. 首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web应用程序: 创建 ...
- 安装onlyoffice document server
1. 安装docker apt install docker.io 2. 安装和启动onlyoffice sudo docker run -i -t -d -p 80:80 onlyoffice/do ...
- NGINX快速部署
NGINX快速部署 #!/bin/bash ############################################################################## ...
- 用sql语句,快速备份表数据
1.SqlServer数据库 --DataTable 原数据表 --DataTable_20150717 要备份的新表名 select * into DataTable_20150717 from D ...
- 解决erlang R17无法识别中文问题
erlang更新到R17已有一段时间了.公司项目打算从旧版的erlang迁移到R17,却不料有不少的困扰,当中一个问题是中文问题. 这个问题非常easy重现:新建一个文件t.erl.保存为utf-8无 ...
- LoadRunner 测试java代码
LR12 JDK 1.7,32位 环境变量配好 待测的java jar包及其依赖的jar包都整理好,放在jdk的lib目录下,也要把jar包放在脚本目录下! =====>新建Java Vuser ...