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

重要的键盘事件：
事件顺序：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：当点击字母键时，会触发这样的事情：

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

        IE，webkit ： 但用户点击字母键，又会发生这样的事情

启发： 由于在这种状态下 是可以捕捉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，输入的慢则少，很好的减少了虚耗。

赞 (0)

相关推荐

  • inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

    像QQ邮箱提示.百度的搜索框提示.淘宝的商品搜索提示等,现在有不少的网站都有类似效果,以提升用户体验. 使用方法: new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width

  • 仿google搜索提示 SuggestFramework的使用

    一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能.利用suggest framework你可以在自己的网站上很轻松实现"输入提示"效果,这种效果会很大程度上提高用户体验,提高搜索效率. 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置. 此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Ma

  • javascript suggest效果 自动完成实现代码分享

    javascript suggest效果 自动完成实现代码分享

    首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西.只要弄懂原理,一下子就能搞出来.想必,以后你们工作也遇到做搜索框的活儿. 由于本人没有后端,因此取用一个对象作为本地数据库.而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西.当前成品已放到github上. 好了,我们动手吧.首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML.不过怎么也好,其成就是一个DIV放到

  • Google Suggest ;-) 基于js的动态下拉菜单

    Google Suggest ;-) 基于js的动态下拉菜单

    基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图: Google自动完成的源代码如下:// Copyright 2004 and onwards Google Inc. var w

  • ajax Suggest类似google的搜索提示效果

    实现: <script type="text/javascript" src="/path/to/SuggestFramework.js"></script> <script type="text/javascript">window.onload = initializeSuggestFramework;</script> 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action 必须

  • JSuggest自动匹配下拉框使用方法(示例代码)

    1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

  • 有关suggest快速删除后仍然出现下拉列表的bug问题

    写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的. 虽然我们把输入框的内容都删除了,甚至做了停止后续请求的相关操作,但是由于ajax是异步的,即使你停止了后续的操作,但是最后一次请求的数据还在回来的路上. 解决办法看代码: var inp = document.getElementById('inp'), timer = 0; inp.oninput = function (e) { var val = e.tar

  • AJAX实现仿Google Suggest效果

    AJAX实现仿Google Suggest效果

    修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果*作者:草履虫(也就是蓝色的ecma)*联系:caolvchong@gmail.com*时间:2007-7-7*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)*测试平台:Firefox2.0,IE6.0,IE7.0*演示地址:http://finish.3322.org/sugges

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

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

    重要的键盘事件: 事件顺序:keydown -> keypress ->keyup 对于输入法开启时: keypress: 这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍: 1. 首先对于大部分功能键是没有keypress事件的 Caps lock ,shift,alt,ctrl,num lock...庆幸的是enter拥有此事件 2. 对于字母,数字,press返回的keyCode是不可靠的 在IE和webkit 下 返回的是ASCII code firfox下永远返回0 但是 对

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • Vue键盘事件用法总结

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

  • Kibo 用于处理键盘事件的Javascript工具库

    入门 Kibo不依赖任何东西.你只要把它放到你的HTML代码里就行了: 复制代码 代码如下: <script type="text/javascript" src="kibo.js"></script> 下载 kibo.js 创建一个Kibo对象实例,事件监听器就建立起来了: 复制代码 代码如下: var k = new Kibo(); Kibo对象的构造器有一个可选参数--你指定的接收事件的HTML元素.可以是input, textarea

  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定 推荐button 方法一:ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明:在对应的控制器中的$scope上绑定一个t

  • Flex 自动获取焦点 监听全局键盘事件

    这是<Flex第一步>QQ群里面一个朋友问我的问题,特此拿出分享一下.或许问题比较简单,还是将其记录一下比较好. 需求如下: 当AIR启动后,监听全局键盘事件,即this.addEventListener( KeyboardEvent.KEY_DOWN, keydownHandler ); 运行后效果: 当AIR运行后,虽然正确监听了KeyboardEvent.KEY_DOWN event,但是必须要鼠标点击一下AIR才可以获取keydownHandler. 原因: 1.keydownHand

  • Python利用pyHook实现监听用户鼠标与键盘事件

    本文以一段简单的监听鼠标.键盘事件的程序,实现获取用户的输入(比如登录某些网站的账号.密码)的功能.经测试,对于一台"裸奔"的电脑,完全能获取到用户输入的任何信息:但是如果安装了杀毒软件,就够呛了.具体实现方法如下: 一.代码部分:获取用户输入信息,并与截图一起保存到XX目录下 # -*- coding: utf-8 -*- # import pythoncom import pyHook import time import socket from PIL import ImageG

  • Python中使用PyHook监听鼠标和键盘事件实例

    PyHook是一个基于Python的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个Python库PyWin32,如同名字所显示的,PyWin32只能运行在Windows平台,所以PyHook也只能运行在Windows平台. 关于PyHook的使用,在它的官方主页上就有一个简单的教程,大体上来说,可以这样使用 # -*- coding: utf-8 -*- # 3import pythoncom 4import pyHook 5def onMouseEvent(e

  • 捕获键盘事件(且兼容各浏览器)

    例子:屏蔽浏览器F5刷新,代用刷新iframe框架 复制代码 代码如下: // 捕获F5事件$("body").keydown(function(e){var ev = window.event || e;var code = ev.keyCode || ev.which;if (code==116) { // 阻止默认的F5事件if(ev.preventDefault) {ev.preventDefault();}else {ev.keyCode=0;ev.returnValue=f

  • C#中winform实现自动触发鼠标、键盘事件的方法

    程序触发鼠标.键盘事件是C#程序设计中比较常见的功能,本文实例展示了C#中winform实现自动触发鼠标.键盘事件的方法,有不错的实用价值.具体如下: 要想在C#程序中触发鼠标.键盘事件就必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// </summary> /// <param name="flags">事件类型</param> /

随机推荐