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移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
过滤器vue.filters的使用方法实现
Sep 18 Javascript
小程序实现投票进度条
Nov 20 Javascript
JavaScript Tab菜单实现过程解析
May 13 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 ADODB使用方法集锦
2008/03/25 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php设计模式小结
2013/02/15 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
javascript每日必学之封装
2016/02/23 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
python实现五子棋小游戏
2020/03/25 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
事业单位请假制度
2014/01/13 职场文书
2014年冬季防火方案
2014/05/21 职场文书
英语求职信范文
2014/05/23 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA