input 输入框内的输入事件详细分析


Posted in Javascript onMarch 17, 2010

1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件.
2.用例:对每个浏览器分别测试如下的情况:
?输入英文字母时?开启输入法时?大小写不同时?输入运算符时?按下tab键时?输入法中按下空格时?按下控制键时?复制粘贴时?删除文本时?等等
3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件)
chrome:
+开启输入法时,可以捕捉到输入事件.
+开启输入法的时候按下空格键,触发两次事件,猜测一次是空格触发的,一次是输入法改变输入框里的文本时触发的.
+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.
+没有开启输入法的时候,方向键不会触发事件,但是开启输入法后,方向键可以触发事件.
+剪切和粘贴都会触发事件.+tab键不处罚事件,开启输入法时,按tab键触发事件.
+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件.
Firefox:
+开启输入法时,不能扑捉到事件,但是按下空格时,可以触发两次事件.
+任何时候方向键都不触发事件.
+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知.
+按下tab键的时候不触发事件.++Firefox页面刷新的时候内容会被保留在输入框里.
+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件.
opera:
+正常情况下,在输入框里按下tab键会触发一次事件,但是此后只要不刷新页面,tab键都不会再触发此事件.
+开启输入法后不会触发事件,开启后,方向键和tab键都不触发事件.
+开启输入法时,按下空格只触发一次事件,不会出现触发两次事件的情况.
+粘贴的时候触发事件,剪切的时候不触发
ie:
+输入法不会触发事件,按空格也都是只触发一次,方向键任何时刻都不触发.
+刷新页面的时候内容会留在input里,而且注意,不管input是不是空的,刷新页面后自动触发一次事件.
3.总结.
就一句话,差异很大.
注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener绑定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent绑定

其它在线演示说明:https://3water.com/tools/keyboard_events.html

Javascript 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
js parseInt("08")未指定进位制问题
Jun 19 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
基于jquery实现五星好评
Nov 18 jQuery
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 #Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 #Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 #Javascript
js select常用操作控制代码
Mar 16 #Javascript
js实现的日期操作类DateTime函数代码
Mar 16 #Javascript
javascript json2 使用方法
Mar 16 #Javascript
jQuery 选择器理解
Mar 16 #Javascript
You might like
JS input 数字验证代码
2009/07/30 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JavaScript简介
2015/02/15 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
node跨域请求方法小结
2017/08/25 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python编写的最短路径算法
2015/03/25 Python
python计算圆周率pi的方法
2015/07/11 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python get获取页面cookie代码实例
2018/09/12 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python中的流程控制详解
2021/02/18 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
利群广告词
2014/03/20 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
授权委托书
2014/09/17 职场文书
销售人才自我评价范文
2014/09/27 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
如何用python反转图片,视频
2021/04/24 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL