首页 > 其他分享 >对键盘事件的总结(针对中文输入法状态)

对键盘事件的总结(针对中文输入法状态)

时间:2023-05-19 17:02:30浏览次数:41  
标签:输入法 -- 中文 用户 键盘 输入框 事件 输入



事件顺序:keydown -> keypress ->keyup

对于输入法开启时:

  keypress:

  这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍:

 首先对于大部分功能键是没有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当点击字母键时,会触发这样的事情:

            

对键盘事件的总结(针对中文输入法状态)_javascript


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

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

          

对键盘事件的总结(针对中文输入法状态)_javascript_02



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



那么如何避免,在输入法运行时用户在敲击回车键,触发回车键原来的事件呢?

         看了上面两个图,这么一来便很简单了 -------keyPress事件绑定原来的事件,如触发搜索等

keyup绑定 在输入法运行时,回车,空格等需要触发的事件,亦可以用来检测退出搜索框

 

那么如何检测用户在输入后的一点呢?

    通过配合上一个问题中判断出的keyUP事件 ,如果需要在输入法出现时屏蔽事件,只要绑定到keypress事件便可以了



对suggestion的总结:



从开始讲起:

在suggestion的开发中,最大的阻碍就是检查用户行为了,而这些用户行为主要会聚在小小的输入框上,对键盘事件的巧妙运用,可以减少代码量,提升性能,最大程度上优化用户体验。

 

主要的用户行为总结如下:

 1.改变输入内容(增加,删除,粘贴)--其中,最重要的便是连续输入了

 2.敲击功能键--主要key值为:

        keyCode :13 --回车键

        keyCode :27 --esc键

 -->webkit内核下会自动定位到首部,记得要preventDefault哦~

        keyCode :40 --下方向键

开发中还遇到了一些小问题,和弯路:

 首先从思想上来个总结:

1.    错误的思路:

 之一:每次用户敲击键盘便发送请求

 这无疑是就简单是方式,但是却需要大量的AJAX,而且大部分是没有展现机会的,好的前端代码,应该充分考虑到前后端交互中虚耗,最大程度上减少虚耗。

 之二:每隔一段时间检测输入框内容:

 每隔一段时间边执行一次代码,浪费性能就不用说什么了,最重要的是,这一机制不能很好的掌控用户输入事件与js检测的先后顺序,

 检测完毕如果正好发生在了用户输入之后,便会出现错误。虽然可以用检测当前输入框状态来弥补,但是体验却很差,而且虚耗了很多ajax请求。

2.优化后的思路:

        绑定在key敲击事件后

        第一种方式开发完后,我发现在自测时,由于不能准确监控用户行为的时间戳,导致了众多bug,再一一修复后,一个更好的思路萌发了。

        通过检测key的敲击事件,来判断是否发送请求,并屏蔽连续敲击事件。

        具体思路:

        当用户聚焦输入框时,开始监控keydown事件,记入此时输入框状态,当有keydown事件并输入框能容改变—》100毫秒后检测当前输入框状态如果与之前不相符择可向后端发送AJAX请求

 这样一来,根据用户的输入,输入频率,判断ajax请求数,并通过阀值的限制,减少ajax请求。用户输入的多,js检测的就多,ajax便多,用户不动,便没有js检测和ajax,输入的慢则少,很好的减少了虚耗。

 

 

标签:输入法,--,中文,用户,键盘,输入框,事件,输入
From: https://blog.51cto.com/u_2700990/6314014

相关文章

  • MagicEXIF(元数据编辑器)Win激活旗舰版中文安装教程下载和介绍
    寻找一款好用的MagicEXIF软件可谓是一场漫长的旅程。在搜索引擎中找到的许多下载网站提供的MagicEXIF软件基本都是假的,带有各种广告捆绑软件,让人感到十分沮丧。此外,有些下载版本也无法激活或注册。不过今天小编为大家提供的这个MagicEXIF(元数据编辑器)win激活版本经过测试已完美安......
  • react-query-builder查询构建器中文文档
    简介react-query-builder是一个React组件库,用于构建可配置的查询构建器。使用react-query-builder,您可以轻松地构建复杂的查询表单,使用户能够以直观的方式构建和执行查询。以下是一些常见的用例:构建高级搜索表单,允许用户根据不同的条件搜索数据。在数据可视化应用程序中使用......
  • visual studio 智能提示是英文,改成中文
    一、.NETFramework1.打开文件夹C:\ProgramFiles(x86)\ReferenceAssemblies\Microsoft\Framework\.NETFramework 2. 把v4.X文件夹里的zh-Hans文件夹复制到你需要的版本文件夹里。3.重启VS即可。 ......
  • es笔记四之中文分词插件安装与使用
    本文首发于公众号:Hunter后端原文链接:es笔记四之中文分词插件安装与使用前面我们介绍的操作及演示都是基于英语单词的分词,但我们大部分使用的肯定都是中文,所以如果需要使用分词的操作肯定也是需要使用中分分词。这里我们介绍一下如何安装中文分词插件。在介绍安装之前,我们可以......
  • 用Python开发输入法后台(2)——输入‘我’的消息交互过程
    用户操作用户输入‘w’,显示以‘w’开始的单字用户输入数字键,比如‘1’,选择一个单字‘我’‘我’字上屏,回到初始状态消息交互过程init,onActivate切换到当前输入法时,后台会发送这两个消息filterKeyDown用户输入‘w’时,后台发送此消息,表示指定keycode是否处理还是忽略,pyth......
  • Python中,如何使得图像的中文和负号正常显示
    问题描述运行的图像结果里面,发现里面有许多空心框框,中文不见了,负号也不见了问题解决解决中文乱码问题:plt.rcParams['font.sans-serif']=['SimHei']解决负号乱码问题:plt.rcParams['axes.unicode_minus']=False以上两条代码均引用于这个包:importmatplotlib.pyplot......
  • ubuntu 18.04 安装搜狗拼音输入法
    一、下载搜狗拼音Linux版本搜狗拼音官网直达:https://shurufa.sogou.com/linux?r=pinyin本次下载最新版本,文件名:sogoupinyin_4.0.1.2800_x86_64.deb二、安装前准备建议更新国内源,推荐阿里云的源;//1、更新源sudoapt-getupdatesudoapt-getupgrade//2.通过命令行安装a......
  • Java数字转中文数字——支持:Integer、BigDecimal
    1、效果publicstaticvoidmain(String[]args){System.out.println(int2chineseNum(3456));System.out.println(int2chineseNum(-3456));System.out.println(bigDec2ChinaNum(newBigDecimal("12367.4852")));System.out.......
  • 用Python开发输入法后台
    首先,安装PIME,github地址:https://github.com/EasyIME/PIME下载安装PIME-1.3.0-stable-setup.exe,就可以得到一个输入法,后端是python,在安装目录下‘C:\ProgramFiles(x86)\PIME\’,python目录就是运行脚本。入口点是'server.py',其中安装目录下的‘PIMELauncher.exe’是负责前后台......
  • 用excel打开csv文件,中文显示乱码
    1.情景展示用dbeaver导出数据,生成了csv格式数据。用微软自带的excel工具打开,中文显示乱码。如何解决?2.具体分析用notepad++打开该文件。可以正常显示,并且,该文件是utf-8编码。默认情况下,Windows平台上的UTF-8编码是带有BOM(ByteOrderMark)的。所以,使用Windows上......