如何防止Web应用基于浏览器的音译与键盘事件发生错误？

音译是使用英文键盘输入非英文字符的一种流行方法，实现此目的的典型方法是通过键盘事件捕获，但是移动浏览器没有统一的支持，我们开发使用音译的Web应用程序时是如何消除基于浏览器的音译与键盘事件发生错误？

以下为了方便说明实例问题，我们都是使用单个词英文作为首先，因为我们中文操作有点复杂。

Google的多语言输入法是使用音译输入非英语字符，基本思想是拥有一个文本框，用户可以在其中使用英文字符拼写自己语言的单词。他们通常使用英文键盘输入这些单词，该Web应用程序将键入的英语击键转换为其本地（非英语）语言的字符，并在文本框中实时显示这些非英语字符，用户可以从文本框中复制文本并将其粘贴到另一个网页或应用程序上的任何文本字段或搜索栏中。

比如我们用Google的多语言输入法输入僧伽罗语单词“පහන”，在中文中意为“灯”，英文为“lamp”。Google输入工具指定的映射是“ pa”代表“ප”，“ ha”代表“හ”，“ na”代表“න”。

因此，只需在Google输入工具文本框中输入 “ pahana”，然后点击即可enter键，映射的僧伽罗语字符“පහන”将出现在文本框中。

请点击输入图片描述

它在桌面浏览器上可以完美运行，但在Android上运行的Chrome移动浏览器上无法运行。

因此我们必须要解决在移动端不能映射的问题：

两种可以的方法

击键转换可以使用JavaScript轻松实现，如果还涉及单词预测，那么就需要后端数据处理，比如PHP、Java、Python等编程语言，但是基本功能可以使用JavaScript实现。

我们可以将非英语（僧伽罗语）字符“ප”映射到英语字符“ p”或键盘上的键“ p”。

方法1（典型方法）：

防止默认行为和捕获键盘事件

使用方法1中的JavaScript可以实现两个主要步骤，首先，必须停止按下或按住键时的默认行为。然后，必须在KeyPress，KeyDown或KeyUp事件捕获功能中指定要键入的所需字符。

按下或按住某个键时的默认行为是在键盘上键入与该键关联的字符。例如，当按下键“ p”时，默认情况下将在文本框中键入英文字符“ p”，我们可以防止这种默认行为，并用我们选择的非英语字符替换任何键的默认字符。

在我们的示例中，当按下键“ p”时，我们将防止键入“ p”，并以编程方式插入映射的字符“ප”而不是字符“ p”，我们可以对键盘上所有映射的字符执行此操作。

方法2（新方法）：

侦听文本框输入并根据最新输入实时修改内容

在此方法中，我们不处理任何键盘事件，相反，我们将跟踪文本框中的最新输入字符，并将该字符替换为我们选择的非英语字符。

在后台，我们的脚本必须正在侦听文本框内容的更改。当按下键“ p”时，键入“ p”。当脚本检测到最后键入的字符是“ p”时，它必须以编程方式删除键入的“ p”并将其替换为“ප”。以类似的方式，可以通过适当的映射将任何非英语字符分配给英语字符来键入它们。

每当通过按键盘上的键来键入英文字符时，我们要做的就是以编程方式删除该键入的字符，并将其替换为映射中指定的非英文字符。

以上是常用的两种方式，或许在开发多语言版本时可以使用到。