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事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
随机推荐
- BAT-使用BAT方法设置IP地址
::------以下为批处理文件内容---- @echo off ::set slection1= set/p slection1=请输入IP地址: netsh interface ip set ad ...
- 源代码分析Fragmentd的BackStack管理过程
1. Fragment基本使用方法 为了管理Activity中的fragments.须要调用Activity中的getFragmentManager()方法.由于FragmentManager的API ...
- 【转】SQL SERVER 2005 数据库状态为“可疑”的解决方法
--MyDB为修复的数据名 USE MASTER GO SP_CONFIGURE 'ALLOW UPDATES',1 RECONFIGURE WITH OVERRIDE GO ALTER DATABA ...
- socket心跳检测
一.什么是心跳检测 判断对方(设备,进程或其它网元)是否正常动行,一般采用定时发送简单的通讯包,如果在指定时间段内未收到对方响应,则判断对方已经当掉.用于检测TCP的异常断开. 基本原因是服务器端不能 ...
- ZOJ 3963 Heap Partition set维护。给一个序列，将其划分成尽量少的序列，使每一个序列满足按照顺序构造二叉树，父母的值<=孩子的值。
Heap Partition Time Limit: Seconds Memory Limit: KB Special Judge A sequence S = {s1, s2, ..., sn} i ...
- 大数据(3) - 高可用 HDFS HA
HDFS HA高可用 1 HA概述 1)所谓HA(high available),即高可用(7*24小时不中断服务). 2)实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件的HA机制 ...
- 【Python + ATX基于uiaotumator2】之Android—APP自动化简易例子
上代码: import uiautomator2 as u2 from time import sleep d = u2.connect_usb('608ad0fe') #打开小卖 # d(text= ...
- 调试node.js应用--node-inspector
如果你在编写Node.js代码,node-inspector是必备之选,比Node.js的内置调试器好出许多.使用起来跟Chrome的javascript调试器很相似. 使用npm安装: $ npm ...
- 在EntityFramework（EF）中删除主从表记录
删除主表: 如果要删除单个的Book对象,由于启用了级联删除,干掉一个Book,它所关联的所有BookReview也一并删除了. (说的简单,如果用Attach方法或者Remove,加修改删除状态, ...
- 进程已经被attach debug，如何解除其debug权限？
今天碰到一个问题,详情: 进程A创建了进程B,并且进程A在创建进程B的时候指定了debug权限: 我的进程C启动了一个Hook,然后系统将我的X dll载入到进程B中: 此时,用visual stud ...