suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)


Posted in Javascript onDecember 20, 2011

重要的键盘事件:
事件顺序:keydown -> keypress ->keyup
对于输入法开启时:
keypress:
这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍:
1. 首先对于大部分功能键是没有keypress事件的
Caps lock ,shift,alt,ctrl,num lock、、、庆幸的是enter拥有此事件
2. 对于字母,数字,press返回的keyCode是不可靠的
在IE和webkit 下 返回的是ASCII code
firfox下永远返回0
但是 对于keyUP keyDOWN事件 键值是完全统一的
3. KeyPress 只能捕获单个字符
KeyDown 和KeyUp可以捕获组合键。故可能涉及组合键的功能需要绑定在down up事件上
对于中文输入法开启时个浏览器对事件的不同相应以及解决方法:
在中文输入法开启状态下:
Firefox:当点击字母键时,会触发这样的事情:

suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)

     为什么叫做虚拟失焦呢 这种状态下并未真正触发失焦状态,但是却屏蔽了所有输入框绑定的键盘事件     

        IEwebkit  但用户点击字母键,又会发生这样的事情

          

suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)

 

启发: 由于在这种状态下 是可以捕捉keyup,keydown从而捕捉KEYCODE的,前端可以通过模拟KEYCODE入输入框实现输入法与输入框的同步状态,并触发在输入状态时便同步suggestion。

那么如何避免,在输入法运行时用户在敲击回车键,触发回车键原来的事件呢?
看了上面两个图,这么一来便很简单了 -------keyPress事件绑定原来的事件,如触发搜索等
keyup绑定 在输入法运行时,回车,空格等需要触发的事件,亦可以用来检测退出搜索框

那么如何检测用户在输入后的一点呢?
通过配合上一个问题中判断出的keyUP事件 ,如果需要在输入法出现时屏蔽事件,只要绑定到keypress事件便可以了
对suggestion的总结:
从开始讲起:
在suggestion的开发中,最大的阻碍就是检查用户行为了,而这些用户行为主要会聚在小小的输入框上,对键盘事件的巧妙运用,可以减少代码量,提升性能,最大程度上优化用户体验。

主要的用户行为总结如下:
1.改变输入内容(增加,删除,粘贴)--其中,最重要的便是连续输入了
2.敲击功能键--主要key值为:
keyCode :13 --回车键
keyCode :27 --esc键
keyCode : 38--上方向键 -->webkit内核下会自动定位到首部,记得要preventDefault哦~
keyCode :40 --下方向键
开发中还遇到了一些小问题,和弯路:
首先从思想上来个总结:
1. 错误的思路:
之一:每次用户敲击键盘便发送请求
这无疑是就简单是方式,但是却需要大量的AJAX,而且大部分是没有展现机会的,好的前端代码,应该充分考虑到前后端交互中虚耗,最大程度上减少虚耗。
之二:每隔一段时间检测输入框内容:
每隔一段时间边执行一次代码,浪费性能就不用说什么了,最重要的是,这一机制不能很好的掌控用户输入事件与js检测的先后顺序,
检测完毕如果正好发生在了用户输入之后,便会出现错误。虽然可以用检测当前输入框状态来弥补,但是体验却很差,而且虚耗了很多ajax请求。
2.优化后的思路:
绑定在key敲击事件后
第一种方式开发完后,我发现在自测时,由于不能准确监控用户行为的时间戳,导致了众多bug,再一一修复后,一个更好的思路萌发了。
通过检测key的敲击事件,来判断是否发送请求,并屏蔽连续敲击事件。
具体思路:
当用户聚焦输入框时,开始监控keydown事件,记入此时输入框状态,当有keydown事件并输入框能容改变—》100毫秒后检测当前输入框状态如果与之前不相符择可向后端发送AJAX请求
这样一来,根据用户的输入,输入频率,判断ajax请求数,并通过阀值的限制,减少ajax请求。用户输入的多,js检测的就多,ajax便多,用户不动,便没有js检测和ajax,输入的慢则少,很好的减少了虚耗。

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
js change,propertychange,input事件小议
Dec 20 #Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 #Javascript
Javascript面向对象设计一 工厂模式
Dec 20 #Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 #Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 #Javascript
五段实用的js高级技巧
Dec 20 #Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 #Javascript
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
javascript打印输出json实例
2013/11/11 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
vue2.0全局组件之pdf详解
2017/06/26 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue计算属性computed的使用方法示例
2019/03/13 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
如何编写python的daemon程序
2021/01/07 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
公务员培的训心得体会
2014/09/01 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL