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事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
随机推荐
- SpringMVC请求使用@PathVariable获取文件名称并且文件名中存在.导致路径被截取的问题
在SpringMVC中,当使用@pathVariable通过Get请求获取路径名称时,如果路径名称上存在小数点,则获取不到小数点后面的内容,会被Spring截取. 比如我获取某一文件,路径是local ...
- 2017-5-14 湘潭市赛 Similar Subsequence 分析+四维dp+一些简单优化
Similar Subsequence Accepted : Submit : Time Limit : MS Memory Limit : KB Similar Subsequence For gi ...
- python XML基础
什么是XML XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 的标签需要 ...
- es6 async与await实战
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...
- Linux下权限掩码umask
一 权限掩码umask umask是chmod配套的,总共为4位(gid/uid,属主,组权,其它用户的权限),不过通常用到的是后3个,例如你用chmod 755 file(此时这文件的权限是属主读( ...
- 5、easyUI-菜单与按钮
列出源码:求解 <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- iOS学习笔记（七）——UI基础UIButton
前面写了UIWindow.UIViewController,那些都是一些框架,框架需要填充上具体的view才能组成我们的应用,移动应用开发中UI占了很大一部分,最基础的UI实现是使用系统提供的各种控件 ...
- 【BZOJ2286】[Sdoi2011]消耗战 虚树
[BZOJ2286][Sdoi2011]消耗战 Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的 ...
- idea 右下角不显示git分支
开发工程中遇到idea右下角不显示git分支问题: 解决方案:查找资料说是需要打开VCS->Enable version control. 但是Enable version control 已经 ...
- shell脚本中格式化日期
date [-u] [-d datestr] [-s datestr] [--utc] [--universal] [--date=datestr] [--set=datestr] [--help] ...