0%

引言

在本文中,我们先来讨论事件处理时的性能问题,尤其是针对键盘和输入法事件处理流程的性能优化。然后我们稍微深入到浏览器的实现,探究一下从用户按下键盘,到输入的文本出现在页面上,中间经历了什么。

性能优化

Web应用程序的性能因素有很多,即使只考虑前端的因素也不少,如浏览器缓存、页面渲染、JavaScript的解析和执行等等。我们这里只关注与UI事件处理相关的性能点。

JavaScript优化

首先考虑JavaScript本身的写法。通常来说,我们给一个输入控件添加事件处理程序(如keydown)后,这个处理程序会在短时间内频繁被调用,比如输入一段文字。如果是与鼠标拖动和滚动相关的事件,可能会更加频繁。此时,在处理程序内部的JavaScript的性能问题就值得关注了。尽管目前浏览器的渲染引擎和JS引擎性能都比较强大,对于复杂业务逻辑来说,注重代码的性能仍是十分有益的。这里结合《高性能JavaScript》一书[1],给出几个建议。

阅读全文 »

引言

这篇文章中,我们通过两个特别的主题来探讨标准与实现的问题。在Web前端领域,虽然标准总是先行,但浏览器厂商以及各平台是否跟进,却有着自己的考量。在前面的文章中,我们已经多次提到过具体的案例,本文中案例一个是关于特殊的keyCode属性[1],另一个是关于键盘布局API的支持。

虽然keyCode属性已被标准废弃,且不推荐使用,在一些老旧系统中,这个属性依然在发挥作用,有些特殊情况还是要处理。关于键盘布局(Keyboard Layout),在这个系列的第一篇文章中就简单提及。因为这是一个涉及用户本地设备的数据隐私的API,浏览器迟迟没有提供较好的支持,后面会详细说明。

阅读全文 »

引言

在这篇文章中,我们来来聊聊如何在Web应用中模拟各类事件的触发。有时候我们需要通过程序脚本,主动触发一些内置事件(如键盘、鼠标、触碰等),或者自定义事件,以满足业务需求。另外,在做Web程序的自动化时,模拟事件的触发也是必备的技能。

isTrusted属性

在讨论模拟事件之前,我们有必要理解事件对象上的一个属性isTrusted[1],它表示事件是否受信。一般来说,由用户操作产生的事件是受信的,该属性为true;而由程序脚本产生和触发的事件是不受信的,该属性为false

阅读全文 »

引言

在这篇文章中,我们来完成在线输入法(Online IME)小程序的基本功能。实现的点包括,使用SHIFT键来切换中英文输入状态,给候选列表提供分页的功能,并且在适当的时候阻止composition事件的处理。跟商业输入法相比,这里实现的功能还是极为有限,但这两篇实践可以给你一个实现层面的基本印象。

新增功能

使用shift键切换输入语言

实现这个功能本身并不难,只需要注意一些容易出错的点。我们默认使用的是中文输入法,即激活组字过程,通过服务端API返回实时组字结果,展示候选词列表。

阅读全文 »

介绍

从这篇文章开始,我们通过一个小项目来实践键盘和输入法相关的开发要点。这是一个在线输入法(Online IME)工具,功能类似Google提供的一个在线输入工具[1]。有了这类工具,你可以在Web页面里面直接使用输入法输入,而不依赖本地设备是否安装输入法。完整代码可以访问这里[2]。

google-input

Google Input Tools
阅读全文 »

引言

在这篇文章中,我会分享一些在实际项目中遇到的问题以及常用实践供大家参考,避免踩坑。多踩坑虽然能积累经验,但也会浪费时间。与键盘和输入法相关的Web应用常常要处理平台兼容性的问题,开发者不仅要通过各种设备覆盖各个浏览器的实现,还要测试各种用户输入的场景以保证没有遗漏边缘case。其实,这类应用程序往往是通过修修补补的方式逐步完善的。本文可以在这方面提供一些参考,希望能帮助相关开发者少走弯路。

不要依赖某一种事件

从前面几篇文章可以看出,浏览器提供的、处理与用户输入相关的事件实在不少,如keydown/keypress、input以及composition等等。开发者不仅需要了解每种事件的定义和包含的信息,还要掌握各类事件触发的场景。如果有时多个事件同时触发,该如何取舍?如果有时期待的事件没有触发,有什么替代方案?这都是需要考虑的问题。

阅读全文 »

引言

最近看了心理学家丹尼尔·卡尼曼的新作《噪声:人类判断的缺陷》,收获不少,结合自己的工作实践,分享一下体会。卡尼曼的成名作是《思考,快与慢》[1],我相信很多人都看过。那本著作的着眼点在于人们认知的偏差,而本书则另辟蹊径,关注人类判断中的噪声。书中有丰富的案例来解释噪声的危害,以及消除噪声的方法,不过都是来自离我们较远的行业,没有深刻体会。在本文中,我会抛开法官断案、保险精算以及医疗诊断,主要关心发生在我们日常工作中的噪声。

noise-book

噪声:人类判断的缺陷
阅读全文 »

介绍

在Web应用程序中,组合键也是一种常用的功能,比如复制-剪切-粘贴的系统功能,ALT+F打开文件菜单的浏览器功能,以及一些自定义的组合键(比如Ctrl+Shift+A完成应用程序的某个操作)。更广义的组合键还包括在某些欧洲键盘布局上,一些特殊字符的输入方式。例如在Mac OS的英语键盘上,可以通过Option+Shift+K组合键输出苹果Logo字符(这里没有写出该字符是因为,在Windows上没有苹果的字体,无法正确显示该Unicode字符)。在这篇文章中我们来看看组合键的处理实践。

apple-logo

“苹果Logo”的输入
阅读全文 »

介绍

在这篇文章中,我们开始探讨浏览器对输入法(IME)[1]相关事件的支持。我们经常使用中文,因此对输入法并不陌生。事实上,输入法只有在中文、日文和韩文等少数语言中有用,大部分欧美人可能都没有输入法的概念。不过考虑到使用输入法的人群的绝对数量还是很大的,各大浏览器厂商对输入法事件的支持也相对完善。

基本概念

以中文拼音输入法为例,输入的过程大致可以分为组字(composition)提交(commit)两阶段。比如我们想打“你好”两个字,会在输入框输入“nihao”的拼音,当输入第一个字母“n”时,组字过程就开始了。此时本地的IME软件(比如微软拼音输入法)会为我们提供组字框候选列表的UI组件,如下图。

ime

输入法组件
阅读全文 »

介绍

在上一篇文章中,我简单介绍了与Web键盘和输入法应用相关的关键技术点。从这篇文章开始我们针对各个主题深入,看有哪些在开发中值得注意的地方。这里先从浏览器支持的与输入相关事件(按键、输入等)开始。

keydown/keyup/keypress 事件

keydown[1]和keyup事件通常会成对出现(也有例外),它们基本上是用户在按下(释放)某个键时,浏览器最先触发的事件。这里还需注意两点:

  1. 无论用户是否在使用输入法,keydown事件总是会触发,即便输入控件中没有任何字符。比如正在用输入法拼字,并且还没有提交。
  2. 在一些特殊的平台或者浏览器(比如Android Chrome或者Mac Firefox等等),keydown事件不一定时最先触发的,一些输入法相关的事件(如compostionstart)会更早触发。这对于有些依赖于事件顺序的业务逻辑会造成影响,而且由于平台相关,与之相关的bug也不易发现。
阅读全文 »