首页 web前端 js教程 suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)_javascript技巧

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

May 16, 2016 pm 05:58 PM
键盘事件

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



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

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

          



 

启发: 由于在这种状态下 是可以捕捉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,输入的慢则少,很好的减少了虚耗。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

学会使用Vue的v-on指令处理键盘快捷键事件 学会使用Vue的v-on指令处理键盘快捷键事件 Sep 15, 2023 am 11:01 AM

学会使用Vue的v-on指令处理键盘快捷键事件在Vue中,我们可以使用v-on指令来监听元素的事件,包括鼠标事件、键盘事件等。本文将介绍如何使用v-on指令来处理键盘快捷键事件,并提供具体的代码示例。首先,需要在Vue实例中定义一个处理快捷键事件的方法。例如,我们可以在methods中添加一个名为handleShortcut的方法:methods:{

学习Pygame的基础教程:快速入门游戏开发 学习Pygame的基础教程:快速入门游戏开发 Feb 19, 2024 am 08:51 AM

Pygame安装教程:快速掌握游戏开发的基础,需要具体代码示例引言:在游戏开发领域中,Pygame是一个非常受欢迎的Python库。它为开发者提供了丰富的功能和易用的接口,让他们能够快速地开发出优质的游戏。本文将为你详细介绍如何安装Pygame,并提供一些具体的代码示例,以帮助你快速掌握游戏开发的基础。一、Pygame的安装安装Python在开始安装Pyga

JavaScript中的事件类型:常见的键盘和鼠标事件 JavaScript中的事件类型:常见的键盘和鼠标事件 Sep 03, 2023 am 09:33 AM

JavaScript提供了广泛的事件,使您可以与网页上的用户操作进行交互并做出响应。在这些事件中,键盘和鼠标事件是最常用的。在本文中,我们将了解JavaScript中不同类型的键盘和鼠标事件,并查看如何使用它们的示例。键盘事件当用户与键盘交互时,例如按下某个键、释放某个键或键入字符,就会发生键盘事件。键盘事件让我们可以做一些很酷的事情,例如检查用户是否在表单中正确输入了某些内容,或者在按下特定键时发生某些操作。就好像网站正在监听您按下的键并做出相应的反应。键盘事件分为三种类型:keydown事件

Pygame安装指南:易学易懂的入门教程 Pygame安装指南:易学易懂的入门教程 Feb 20, 2024 pm 12:39 PM

Pygame安装教程:简单易懂的入门指南,需要具体代码示例引言:Pygame是一款非常流行的用于开发2D游戏的Python库。它提供了丰富的功能和易用的接口,使得游戏开发更加简单和有趣。本文将为大家介绍Pygame的安装过程,并提供具体的代码示例,帮助初学者快速入门。一、安装Python和Pygame下载Python和Pygame:首先需要安装Python,

如何利用Golang打造高效的游戏开发框架 如何利用Golang打造高效的游戏开发框架 Mar 06, 2024 pm 06:15 PM

作为一门业界热门且高效的编程语言,Golang在游戏开发领域也有着广泛的应用。本文将介绍如何利用Golang打造高效的游戏开发框架,并提供具体的代码示例。我们将以一个简单的2D小游戏为例进行讲解。第一部分:游戏引擎搭建首先,我们需要搭建一个简单的游戏引擎,包含游戏循环、图形渲染等功能。以下是一个简单的游戏引擎框架:packageenginei

Java Swing与其他GUI库对比:优势与劣势 Java Swing与其他GUI库对比:优势与劣势 Mar 28, 2024 pm 04:02 PM

优势:跨平台兼容性:Swing组件基于Java虚拟机(JVM),可以在支持Java的任何平台上运行,包括windows、MacOS和linux。这种跨平台兼容性使其成为开发跨平台应用程序的理想选择。丰富的组件集:Swing提供了广泛的组件,包括按钮、文本字段、列表和表格。这些组件高度可定制,允许开发人员创建复杂的用户界面。强大的布局管理器:Swing提供了几个布局管理器,例如BorderLayout、FlowLayout和GridBagLayout。这些布局管理器有助于组织和排列组件,从而简化用

Pygame安装教程:让你迅速上手游戏编程 Pygame安装教程:让你迅速上手游戏编程 Feb 20, 2024 am 09:17 AM

Pygame安装教程:让你迅速上手游戏编程引言:Pygame是一款基于Python编程语言的游戏开发库,它提供了一系列丰富的功能和工具,能够帮助开发者快速实现2D游戏的创建和设计。本文将介绍如何安装Pygame,并给出具体的代码示例,帮助初学者迅速上手游戏编程。一、安装Pygame:确保已经安装了Python环境:首先要在计算机上安装Python解释器,确保

事件冒泡的实际应用和适用事件类型 事件冒泡的实际应用和适用事件类型 Feb 18, 2024 pm 04:19 PM

事件冒泡的应用场景及其支持的事件种类事件冒泡是指当一个元素上的事件被触发时,该事件会被传递给该元素的父元素,再传递给该元素的祖先元素,直到传递到文档的根节点。它是事件模型的一种重要机制,具有广泛的应用场景。本文将介绍事件冒泡的应用场景,并探讨它所支持的事件种类。一、应用场景事件冒泡在Web开发中有着广泛的应用场景,下面列举了几个常见的应用场景。表单验证在表单

See all articles