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 相关文章推荐
重定向实现代码
Nov 20 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
自动跳转中英文页面
2006/10/09 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python面向对象封装操作案例详解
2019/12/31 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
上海中网科技笔试题
2012/02/19 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
自我推荐书
2013/12/04 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
证婚人经典证婚词
2014/01/09 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
关于运动会的广播稿
2014/09/22 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
表扬稿范文
2015/01/17 职场文书
介绍信如何写
2015/01/31 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
政协常委会议主持词
2015/07/03 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL