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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
RequireJs的使用详解
Feb 19 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 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
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP的几个常用加密函数
2016/02/03 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Python交换变量
2008/09/06 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
店长助理岗位职责
2013/12/13 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
运动会方阵解说词
2014/02/12 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
倡议书范文格式
2014/05/12 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2019新员工心得体会
2019/06/25 职场文书