`
yong7181000
  • 浏览: 31017 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

在 JavaScript 中监听 IME 键盘输入事件

阅读更多

在 JavaScript
中监听用户的键盘输入是很容易的事情,但用户一旦使用了输入法,问题就变得复杂了。输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触发事件呢?不同的操作系统和不同的浏览器对此有不同的看法。在最糟糕的情况下,用户使用输入法后浏览器就只触发一次keydown,之后就没有任何的键盘事件了。这对于 Suggestion 控件的实现来说是个大问题,因为 Suggestion 控件需要监听文本输入框的变化,而事件是最准确也最节省计算资源的做法,如果换成轮询的话性能就可能受到影响。

  首先,要监听启用输入法后的击键事件应当使用 keydown事件,这是信息最丰富的一个事件,因为在启用输入法后别的键盘事件可能不会被触发。其次,大多数操作系统和浏览器都实现了一个事实标准,就是在用户使用输入法输入时, keydown事件传入的 keyCode取值为 229。然而触发 keydown的频率是不确定的,有些情况下每一下击键都触发事件,有些情况下只有选词完毕才触发事件。这时候,如果我们还是要实时监控文本框的内容变化,就必须使用轮询了。

var timer;
var imeKey = 229;

function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey) {
timer = setInterval(checkTextValue, 50);
} else {
checkTextValue();
}
}

function checkTextValue() {
/* handle input text change */
}



  Opera 是一款有趣的浏览器,别人做的事情它都不做,别人都不做的事情它都喜欢做。例如说,它偏偏不支持 keyCode == 229这个事实标准,而要使用 keyCode == 197来表示输入法的使用。因此,你需要在上述代码的基础上做一下改良,如果监测到是 Opera 浏览器,就换一个 keyCode 常量来做比较。

var imeKey = (UA.Opera == 0) ? 229 : 197;


  最后,还有一个更不受重视的浏览器叫做 Firefox for Mac 。估计是因为 Mac 版本对于 Mozilla 来说实在是太不重要了,所以很多 Windows 版本都没问题的地方 Mac 版本就会出小问题,例如说对上述事件的支持。 Firefox for Mac 不会出现 keyCode == 229的情况,而且在输入法启用后只有第一下击键会触发 keydown事件,因此只能在击键后一直使用轮询。


if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {

  在添加了这两项改进后,实时监控文本框的变化就没有问题了,即使用户启用了输入法。完整的代码如下:

var timer;
var imeKey = (UA.Opera == 0) ? 229 : 197;

function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
timer = setInterval(checkTextValue, 50);
} else {
checkTextValue();
}
}

function checkTextValue() {
/* handle input text change */
}





分享到:
评论

相关推荐

    在JavaScript中监听IME键盘输入事件

    2. 监听IME键盘输入的事件类型:通常情况下,keydown事件在使用输入法时是最为可靠的一个事件,因为它提供了关于键入操作的丰富信息。尽管如此,keydown事件触发的频率可能是不确定的,有的浏览器或操作系统会在每次...

    EditText监听输入完成

    在PhoneGap中,你需要使用类似`cordova-plugin-native-keyboard`这样的插件来监听键盘事件,然后通过JavaScript与Java原生代码交互来实现输入完成的监听。具体步骤包括安装插件、注册监听器以及通过`cordova.exec()`...

    javascript小键盘(带输入法)有demo

    在这个项目中,开发者利用JavaScript的DOM(Document Object Model)操作来动态创建和控制键盘元素,通过事件监听来响应用户的点击操作,模拟键盘按键的按下和释放行为。 输入法功能的实现可能基于现有的开源输入...

    解决Unity的Webgl中InputField无法输入中文字符的问题.zip

    你可以编写一个JavaScript脚本,监听键盘事件并处理中文输入,然后通过Unity的`UnityLoader.js`将这个脚本注入到WebGL构建中。 3. **优化IME支持**:Unity的WebGL构建默认可能不支持IME,因此需要在JavaScript端...

    CSS的ime-mode屏蔽中文输入法

    例如,可以监听键盘事件,判断用户是否正在尝试输入非数字字符,并进行相应的处理。 另外,标签中提到了“源码”和“工具”,这可能意味着在实际项目中,你可能需要编写一些自定义代码或者利用现有的库或框架来辅助...

    Unity WebGL中文输入 支持输入法跟随 支持全屏(Dome)

    在处理中文输入时,Unity应用会监听键盘事件,并通过JSIL调用JavaScript函数来激活和管理浏览器内置的输入法。 输入法跟随功能的实现则涉及到更复杂的CSS和JavaScript操作。通常,需要监听Unity WebGL canvas元素的...

    input禁止键盘及中文输入,但可以点击

    2. `onkeypress="noPermitInput(event)"`:这是一个JavaScript事件监听器,当用户按下键盘键时触发`noPermitInput`函数。这个函数会阻止键盘输入。 3. `noPermitInput`函数的实现: - `var evt = window.event || ...

    js虚拟键盘

    在"js虚拟键盘"这个项目中,提供了中英文切换的功能,这意味着用户可以方便地在输入中文和英文之间进行切换,提高输入的灵活性和适用性。 首先,我们需要了解JavaScript的基础。JavaScript是一种广泛用于网页和网络...

    javascript写的输入法。

    2. **事件监听**:IME.js监听键盘事件,捕获用户输入的拼音序列。 3. **拼音处理**:处理输入的拼音,可能包括拼音纠错、拼音到词语的映射等。 4. **数据查找**:data.js中的数据结构被查询,找出与输入拼音匹配的...

    js 只接收数字键盘,屏蔽字母区键盘

    在这个场景下,`onkeypress` 事件在用户按下键盘键时触发。 #### 1.1 事件对象 - **`event` 对象**:这是 JavaScript 中一个非常重要的对象,它包含了与事件有关的所有信息。例如,`event.keyCode` 和 `event....

    onchange,onpropertychange,oninput键盘输入和js赋值时区别

    在JavaScript中,`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件,它们各自有特定的触发条件,特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释: 1. `...

    前端项目-jquery.ime.zip

    在使用jQuery.ime时,首先需要在项目中引入jQuery库和jQuery.ime库的JavaScript文件。接着,选择需要应用输入法的元素,通过$.ime()方法进行初始化,并指定所需的语言。例如,启用中文输入可以这样写: ```...

    js 实现汉字输入

    3. **事件处理**:在JavaScript中,事件处理是监听和响应用户操作(如键盘输入)的重要方式。例如,可以使用`addEventListener`方法绑定`keydown`事件,当用户按下键盘上的键时,会触发预设的处理函数。在这个函数中...

    一些常用的特效包括一些javascript中event对象的使用

    在JavaScript中,`Event`对象是所有事件的基础,它提供了与事件相关的各种信息。这些信息通常包括事件类型、键盘按键值、鼠标点击位置等。 #### 1.2 常用事件属性 - `keyCode`: 键盘事件发生时按下的键的虚拟键码。...

    InputWebGL.zip

    1. **监听键盘事件**:在JavaScript层,监听`window.onkeydown`和`window.onkeyup`事件,以获取用户按键的信息。 2. **处理IME(Input Method Editor)**:IME是用于输入复杂语言(如中文)的系统组件,解决方案需要...

    javascript禁用键盘功能键让右击及其他键无效.docx

    如果希望禁止用户在输入框内粘贴文本,可以在`<input>`标签中添加`onpaste`属性: ```html ``` #### 7. 关闭输入法 对于需要控制输入的语言环境,可以使用CSS属性`ime-mode:disabled`来关闭输入法: ```html ...

    各种禁止键盘的经典JS

    ### 各种禁止键盘的经典JS #### 知识点概览 本文将详细介绍一个用于...通过对`keydown`事件的监听与处理,有效地控制了用户在指定输入框中的输入行为。开发者可以根据实际需求调整脚本参数,以满足不同的应用场景。

    secure-ime:类似于IME的工具,可安全地转换输入文本

    5. **事件监听和处理**:了解如何监听键盘事件,以及如何响应这些事件来实现IME的功能。 6. **模块化和包管理**:可能使用了模块化工具(如CommonJS或ES6模块),以及包管理器(如npm)来组织和管理代码依赖。 7. **...

    JS控制input_输入字符限制

    在JavaScript(JS)中,对`input`元素的输入进行限制是常见的需求,尤其是在构建前端表单时。本文将详细讲解如何使用JavaScript控制`input`输入的字符限制,包括限制输入类型、屏蔽输入法以及禁用编辑等。 1. **...

Global site tag (gtag.js) - Google Analytics