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事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
随机推荐
- 返回当前文档的文档的url
HTML DOM referrer 属性 HTML DOM Document 对象 定义和用法 referrer 属性可返回载入当前文档的文档的 URL. 语法 document.referrer 说 ...
- oracle 数据查询
1,读取从今天到1个月前之间的数据select * from tablewhere column between add_months(sysdate, -1) and sysdate;
- nginx 中location和root，你确定真的明白他们关系？
最近公司开发新项目,web server使用nginx,趁周末小小的研究了一下,一不小心踩了个坑吧,一直404 not found!!!!!当时卡在location和root中,但是网上却比较少聊这方 ...
- Linux 实用工具vi
vi有输入和命令两种工作模式.命令模式是用来运行一些编排文件.存档以及离开vi等操作命令. 当执行vi后,首先进入命令模式,此时输入的人数字符都被视为命令. 在命令模式下,可以使用如下两个键进入文本输 ...
- tomcat 测试页面显示
首先下载匹配jdk版本的tomcat 解压即可使用 将完成的html文件直接放置到webapps目录下的子目录中是无法使用的 原因是tomcat默认加载的是jsp文件,且需要文件配置 所以,除去在we ...
- Eclipse 菜单
Eclipse 菜单 Eclipse 查看的菜单栏通常包含以下几个菜单: File 菜单 Edit 菜单 Navigate 菜单 Search 菜单 Project 菜单 Run 菜单 Window ...
- Unity3D学习笔记——NGUI之Localization system
Localization system(国际化系统) 实现的就是用户选择不同的语言,切换我们游戏文字的显示. 一:创建一个CVS文件.可以用Google Docs, Excel等软件工具. 我这里用的 ...
- C++11写算法之选择排序
选择排序,顾名思义,指从数组后面将最小的值找出来,然后与最前面(指当前位置)值进行交换. 时间复杂度:O(n^2) 空间复杂度:O(1) 此处应用了C++11的auto , lambda , stat ...
- 制作dos启动u盘
需要准备的工具: 空U盘的U盘HP优盘启动盘格式化工具 链接:https://pan.baidu.com/s/1i59wgUp 密码:l5ke 1.1插入U盘,打开 HP优盘启动盘格式化工具 1. ...
- mongo-connector来同步mongo
个人博客:https://blog.sharedata.info/ 最近需要做mongo之间的同步,因此还是选择之前的工具mongo-connectorgitHub文档:https://github. ...