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事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
随机推荐
- Cap'n Proto, FlatBuffers, and SBE
转自:utm_source=tuicool">http://kentonv.github.io/capnproto/news/2014-06-17-capnproto-flatbuff ...
- FastDFS单机搭建以及java客户端Demo
http://blog.csdn.net/u012453843/article/details/69951920 http://blog.csdn.net/xyang81/article/detail ...
- 大数据（4） - HDFS常用的shell操作
注意:这次使用的是第二部分安装的集群,不是高可用集群 为了方便,开发,必须写集群脚本,试想集群的机器是100台以上,而不是3台的情况.... 集群启动脚本 vim /home/admin/tools/ ...
- if not aa 表示如果aa等于空就是true 相当于if not aa 相当于 if aa== 空
aa='tt' print(not aa) #表示 bb是空的 not 表示空 bb='' print(not bb)
- 【Mac + Python3.6 + ATX基于facebook-wda】之IOS自动化（二）：安装facebook-wda库并编写简易自动化测试脚本
上一篇介绍完如何安装WDA,接下来开始正式安装开发库并编写自动化脚本. 目录: 一.安装facebook-wda库 二.通过WEditor定位元素 三.附录:学习资料 一.安装facebook-wda ...
- Oracle----Oracle 11g XE release2安装与指导
今天上午我安装了Oracle 11g企业版,发现太占内存了,考虑到MS SQL有express版本,所以寻思着尝试尝试Oracle 11g的express版本,就是EX版本.下面是具体的安装步骤. 1 ...
- 视频输出hdtv和sdtv
SDTV和HDTV人们分别把它们叫标准清晰度数字电视和高清晰度数字电视,SDTV电视节目很早在欧洲就开始广播,如,DVB-S(卫星数字视频广播).DVB-C(有线数字视频广播).DVB-T(地面数字视 ...
- 一套一般般的前端框架 layui
http://www.layui.com/doc/
- keycode 大全，javascript 再也不用操心我不知道的keycode了
keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter ...
- Python抓取网页并保存为PDF
https://blog.csdn.net/shenwanjiang111/article/details/67634794