oninput & onpropertychange实时监听输入框的变化 && ie8堆栈溢出
2015-12-09 11:21
501 查看
(注:本文针对IE8ji以上版本)
oninput 是 HTML5 的标准事件,对于检测 textarea,
input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:
在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代oninput,在监听到 onpropertychange 事件后,可以使用
event 的 propertyName 属性来获取发生变化的属性名称。
最后需要注意的是:oninput 和 onpropertychange 这两个事件在
IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,而
IE 其他版本都是正常的,目前还没有很好的解决方案。
参考:/article/1210234.html
最好是IE8用onpropertychange,其他用oninput 。
Juqery中区别IE8级以上
检查是否为IE
6-8
if (!$.support.leadingWhitespace) {//IE 6-8}
Tips:jQuery从1.9
版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持IE
6/7/8。 以后,如果用户需要支持IE6/7/8,只能使用jQuery1.9。
堆栈溢出
在 IE8 中使用onpropertychange时,出现了stack
overflow的弹框提示。
原因:监控输入框输入的时候,不论输入的是非数字还是数字,都会对输入值进行处理。处理后由于输入框value值发生变化,于是又走进onpropertychange的监控中,死循环造成堆栈溢出。(oninput没有这个问题)
解决办法:输入值改变时,input立即失焦并解除onpropertychange事件,然后改变value,然后input再聚焦并绑定onpropertychange事件。这个方法IE8有弊端,输入过快时会消耗大量的cpu与内存。
其实最好的方法就是在这个输入框禁止用户右键操作,这样啥问题都没有了,哈哈。
http://www.internetke.com/tutorial/js/2014/0107/410.html
oninput 是 HTML5 的标准事件,对于检测 textarea,
input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:
在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代oninput,在监听到 onpropertychange 事件后,可以使用
event 的 propertyName 属性来获取发生变化的属性名称。
最后需要注意的是:oninput 和 onpropertychange 这两个事件在
IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,而
IE 其他版本都是正常的,目前还没有很好的解决方案。
参考:/article/1210234.html
最好是IE8用onpropertychange,其他用oninput 。
Juqery中区别IE8级以上
检查是否为IE
6-8
if (!$.support.leadingWhitespace) {//IE 6-8}
Tips:jQuery从1.9
版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持IE
6/7/8。 以后,如果用户需要支持IE6/7/8,只能使用jQuery1.9。
堆栈溢出
在 IE8 中使用onpropertychange时,出现了stack
overflow的弹框提示。
原因:监控输入框输入的时候,不论输入的是非数字还是数字,都会对输入值进行处理。处理后由于输入框value值发生变化,于是又走进onpropertychange的监控中,死循环造成堆栈溢出。(oninput没有这个问题)
解决办法:输入值改变时,input立即失焦并解除onpropertychange事件,然后改变value,然后input再聚焦并绑定onpropertychange事件。这个方法IE8有弊端,输入过快时会消耗大量的cpu与内存。
var input = document.getElementById("input"); input.attachEvent("onfocus", pchange); input.attachEvent("onblur", function(){ input.onpropertychange = null; }); function pchange(){ input.onpropertychange = function(){ //浏览器一旦focus和blur的速度没有赶上这段代码执行的速度,这里就会造成stack overflow if(window.event.propertyName == "value"){ var _this = window.event.srcElement; _this.blur(); _this.value = _this.value.replace(/\D/,''); _this.focus(); } }; }
其实最好的方法就是在这个输入框禁止用户右键操作,这样啥问题都没有了,哈哈。
$(document).bind("contextmenu",function(){return false;});参考:http://www.aichengxu.com/view/9263
http://www.internetke.com/tutorial/js/2014/0107/410.html
相关文章推荐
- dma传输原理,及其linux总线驱动之DMA传输,
- 搭建Hadoop集群
- 一台服务器安装运行多个Tomcat及注册服务
- linux下libevent的安装和使用例子:数据回显
- 服务器java 项目 linux上乱码问题
- 在opencv3中的机器学习算法
- linux语句每日积累
- Hadoop学习路线图
- Linux RPM 命令参数使用详解
- Linux下的一些时间说明
- 大型网站后台架构的演变
- 帝国CMS网站管理系统安装方法图文教程
- Hadoop MapReduce Job提交后的交互日志
- CentOS-更新yum源
- 我的OpenCV学习笔记(20):提取元素的轮廓及形状描述子
- 夺命雷公狗---linux NO:3 linux命令的格式目录操作命令
- linux redhat安装,开启telnet服务
- Linux查看SSH用户登陆日志
- 夺命雷公狗---linux NO:2 linux命令的格式
- Tomcat 7 如何手工部署war包对应的Java项目