Heim Web-Frontend js-Tutorial 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,输入的慢则少,很好的减少了虚耗。
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Erfahren Sie, wie Sie die v-on-Direktive von Vue verwenden, um Tastaturkürzelereignisse zu verarbeiten Erfahren Sie, wie Sie die v-on-Direktive von Vue verwenden, um Tastaturkürzelereignisse zu verarbeiten Sep 15, 2023 am 11:01 AM

Erfahren Sie, wie Sie den v-on-Befehl von Vue verwenden, um Tastaturkürzelereignisse zu verarbeiten. In Vue können wir den v-on-Befehl verwenden, um auf Elementereignisse zu warten, einschließlich Mausereignissen, Tastaturereignissen usw. In diesem Artikel wird erläutert, wie Sie mit der v-on-Direktive Tastaturkürzelereignisse verarbeiten, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen Sie in der Vue-Instanz eine Methode definieren, um Tastenkombinationsereignisse zu verarbeiten. Beispielsweise können wir eine Methode namens handleShortcut zu Methoden hinzufügen: Methoden:{

Grundlegendes Tutorial zum Erlernen von Pygame: Schnelle Einführung in die Spieleentwicklung Grundlegendes Tutorial zum Erlernen von Pygame: Schnelle Einführung in die Spieleentwicklung Feb 19, 2024 am 08:51 AM

Pygame-Installations-Tutorial: Beherrschen Sie schnell die Grundlagen der Spieleentwicklung, spezifische Codebeispiele sind erforderlich. Einführung: Im Bereich der Spieleentwicklung ist Pygame eine sehr beliebte Python-Bibliothek. Es bietet Entwicklern umfangreiche Funktionen und benutzerfreundliche Schnittstellen, sodass sie schnell hochwertige Spiele entwickeln können. In diesem Artikel erfahren Sie ausführlich, wie Sie Pygame installieren, und stellen einige spezifische Codebeispiele bereit, damit Sie schnell die Grundlagen der Spieleentwicklung erlernen können. 1. Installation von Pygame Installieren Sie Python und beginnen Sie mit der Installation von Pyga

Ereignistypen in JavaScript: Häufige Tastatur- und Mausereignisse Ereignistypen in JavaScript: Häufige Tastatur- und Mausereignisse Sep 03, 2023 am 09:33 AM

JavaScript bietet eine breite Palette von Ereignissen, die es Ihnen ermöglichen, mit Benutzeraktionen auf Webseiten zu interagieren und darauf zu reagieren. Unter diesen Ereignissen werden Tastatur- und Mausereignisse am häufigsten verwendet. In diesem Artikel betrachten wir die verschiedenen Arten von Tastatur- und Mausereignissen in JavaScript und sehen Beispiele für deren Verwendung. Tastaturereignisse Tastaturereignisse treten auf, wenn ein Benutzer mit der Tastatur interagiert, z. B. wenn er eine Taste drückt, eine Taste loslässt oder ein Zeichen eingibt. Mit Tastaturereignissen können wir einige coole Dinge tun, z. B. überprüfen, ob der Benutzer etwas richtig in ein Formular eingegeben hat oder ob etwas passiert, wenn eine bestimmte Taste gedrückt wird. Es ist, als würde die Website auf die von Ihnen gedrückten Tasten hören und entsprechend reagieren. Tastaturereignisse werden in drei Typen unterteilt: Keydown-Ereignisse

Pygame-Installationsanleitung: Ein leicht verständliches Einführungs-Tutorial Pygame-Installationsanleitung: Ein leicht verständliches Einführungs-Tutorial Feb 20, 2024 pm 12:39 PM

Pygame-Installationsanleitung: Eine einfache und leicht verständliche Anleitung für den Einstieg, die spezifische Codebeispiele erfordert. Einführung: Pygame ist eine sehr beliebte Python-Bibliothek für die Entwicklung von 2D-Spielen. Es bietet umfangreiche Funktionen und benutzerfreundliche Schnittstellen, wodurch die Spieleentwicklung einfacher und interessanter wird. Dieser Artikel führt Sie in den Installationsprozess von Pygame ein und stellt spezifische Codebeispiele bereit, um Anfängern den schnellen Einstieg zu erleichtern. 1. Installieren Sie Python und Pygame. Laden Sie Python und Pygame herunter: Zuerst müssen Sie Python installieren.

So erstellen Sie mit Golang ein effizientes Spieleentwicklungs-Framework So erstellen Sie mit Golang ein effizientes Spieleentwicklungs-Framework Mar 06, 2024 pm 06:15 PM

Als beliebte und effiziente Programmiersprache in der Branche wird Golang auch häufig im Bereich der Spieleentwicklung eingesetzt. In diesem Artikel wird erläutert, wie Sie mit Golang ein effizientes Spieleentwicklungs-Framework erstellen und spezifische Codebeispiele bereitstellen. Zur Erläuterung nehmen wir als Beispiel ein einfaches 2D-Spiel. Teil eins: Game-Engine-Konstruktion Zuerst müssen wir eine einfache Game-Engine erstellen, einschließlich Spielschleife, Grafik-Rendering und anderen Funktionen. Das Folgende ist ein einfaches Game-Engine-Framework: packageenginei

Java Swing im Vergleich zu anderen GUI-Bibliotheken: Vor- und Nachteile Java Swing im Vergleich zu anderen GUI-Bibliotheken: Vor- und Nachteile Mar 28, 2024 pm 04:02 PM

Vorteile: Plattformübergreifende Kompatibilität: Swing-Komponenten basieren auf der Java Virtual Machine (JVM) und können auf jeder Plattform ausgeführt werden, die Java unterstützt, einschließlich Windows, MacOS und Linux. Diese plattformübergreifende Kompatibilität macht es ideal für die Entwicklung plattformübergreifender Anwendungen. Umfangreicher Komponentensatz: Swing bietet eine breite Palette an Komponenten, darunter Schaltflächen, Textfelder, Listen und Tabellen. Diese Komponenten sind hochgradig anpassbar und ermöglichen es Entwicklern, komplexe Benutzeroberflächen zu erstellen. Leistungsstarke Layout-Manager: Swing bietet mehrere Layout-Manager wie BorderLayout, FlowLayout und GridBagLayout. Diese Layout-Manager helfen bei der Organisation und Anordnung von Komponenten, um die Verwendung zu vereinfachen

Praktische Anwendungen von Event-Bubbling und anwendbare Event-Typen Praktische Anwendungen von Event-Bubbling und anwendbare Event-Typen Feb 18, 2024 pm 04:19 PM

Anwendungsszenarien für Event-Bubbling und die von ihm unterstützten Ereignistypen. Event-Bubbling bedeutet, dass, wenn ein Ereignis für ein Element ausgelöst wird, das Ereignis an das übergeordnete Element des Elements und dann an das Vorgängerelement des Elements weitergeleitet wird wird an den Wurzelknoten des Dokuments übergeben. Es ist ein wichtiger Mechanismus des Ereignismodells und hat ein breites Spektrum an Anwendungsszenarien. In diesem Artikel werden die Anwendungsszenarien des Event-Bubbling vorgestellt und die unterstützten Ereignistypen untersucht. 1. Anwendungsszenarien Event-Bubbling hat eine breite Palette von Anwendungsszenarien in der Webentwicklung. Hier sind einige gängige Anwendungsszenarien. Formularvalidierung im Formular

Pygame-Installations-Tutorial: Ermöglicht Ihnen einen schnellen Einstieg in die Spieleprogrammierung Pygame-Installations-Tutorial: Ermöglicht Ihnen einen schnellen Einstieg in die Spieleprogrammierung Feb 20, 2024 am 09:17 AM

Pygame-Installations-Tutorial: Ermöglicht Ihnen den schnellen Einstieg in die Spieleprogrammierung. Einführung: Pygame ist eine Spieleentwicklungsbibliothek, die auf der Programmiersprache Python basiert. Sie bietet eine umfangreiche Reihe von Funktionen und Tools, die Entwicklern helfen, schnell 2D-Spiele zu erstellen und zu entwerfen. In diesem Artikel wird die Installation von Pygame vorgestellt und spezifische Codebeispiele gegeben, um Anfängern den schnellen Einstieg in die Spieleprogrammierung zu erleichtern. 1. Pygame installieren: Stellen Sie sicher, dass Sie die Python-Umgebung installiert haben: Installieren Sie zunächst den Python-Interpreter auf Ihrem Computer

See all articles