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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
php 常用字符串函数总结
2008/03/15 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP会话处理的10个函数
2015/08/11 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Python可变参数函数用法实例
2015/07/07 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python 实现A*算法的示例代码
2018/08/13 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python制作简单五子棋游戏
2019/06/18 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
销售主管岗位职责
2014/02/08 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
园林技术专业求职信
2014/07/28 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫