iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >怎么在JavaScript中监听IME键盘输入事件
  • 405
分享到

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

2024-04-02 19:04:59 405人浏览 薄情痞子
摘要

这篇文章主要讲解了“怎么在javascript中监听IME键盘输入事件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在JavaScript中监听IME键

这篇文章主要讲解了“怎么在javascript中监听IME键盘输入事件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在JavaScript中监听IME键盘输入事件”吧!

在最糟糕的情况下,用户使用输入法后浏览器就只触发一次 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() {        }

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() {        }

感谢各位的阅读,以上就是“怎么在JavaScript中监听IME键盘输入事件”的内容了,经过本文的学习后,相信大家对怎么在JavaScript中监听IME键盘输入事件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: 怎么在JavaScript中监听IME键盘输入事件

本文链接: https://www.lsjlt.com/news/74703.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么在JavaScript中监听IME键盘输入事件
    这篇文章主要讲解了“怎么在JavaScript中监听IME键盘输入事件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在JavaScript中监听IME键...
    99+
    2024-04-02
  • vue中如何监听键盘回车事件
    这篇文章将为大家详细讲解有关vue中如何监听键盘回车事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:<...
    99+
    2024-04-02
  • WinForm中怎么处理键盘输入事件
    在WinForm中处理键盘输入事件可以通过重写Form类的Key事件来实现。以下是处理键盘输入事件的步骤: 打开你的WinFor...
    99+
    2024-04-08
    winform
  • JavaScript中的事件监听是什么
    这篇文章主要介绍“JavaScript中的事件监听是什么”,在日常操作中,相信很多人在JavaScript中的事件监听是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja...
    99+
    2024-04-02
  • Android中怎么监听软键盘状态
    本篇文章为大家展示了Android中怎么监听软键盘状态,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android 监听软键盘状态的实例详解activityRoot是activity的根view,就...
    99+
    2023-05-30
    android
  • 在Android项目中怎么监听home键
    这期内容当中小编将会给大家带来有关在Android项目中怎么监听home键,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Android 解决监听home键的几种方法前言:以下两种方法可以完美解决监听bac...
    99+
    2023-05-31
    android home roi
  • JavaScript中的键盘、鼠标事件怎么实现
    本文小编为大家详细介绍“JavaScript中的键盘、鼠标事件怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript中的键盘、鼠标事件怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思...
    99+
    2024-04-02
  • Android中的监听触摸事件怎么在Fragment中实现
    本篇文章为大家展示了Android中的监听触摸事件怎么在Fragment中实现,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。activity的触摸事件 @Override public boolea...
    99+
    2023-05-31
    android fragment roi
  • 怎么在Html5中监听拦截Android返回键
    怎么在Html5中监听拦截Android返回键?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。浏览器窗口有一个history对象,用来保存浏览历史。如果当前窗口先...
    99+
    2023-06-09
  • Java项目中如何将键盘输入事件保存到txt文件
    本篇文章给大家分享的是有关Java项目中如何将键盘输入事件保存到txt文件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。具体如下:package javatest;i...
    99+
    2023-05-31
    java ava 目中
  • 怎么在html5中实现移动端价格输入键盘
    今天就跟大家聊聊有关怎么在html5中实现移动端价格输入键盘,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。HTML:<div class="main&quo...
    99+
    2023-06-09
  • vue中怎么监听回到顶部滚动事件
    今天就跟大家聊聊有关vue中怎么监听回到顶部滚动事件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。鼠标滚到到页面中间出现的工具浮框<templ...
    99+
    2024-04-02
  • vue中怎么利用v-on指令监听事件
    这篇文章将为大家详细讲解有关vue中怎么利用v-on指令监听事件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。<!DOCTYPE html&...
    99+
    2024-04-02
  • Android中怎么利用NavigationView头部设置监听事件
    今天就跟大家聊聊有关Android中怎么利用NavigationView头部设置监听事件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。将XML里的静态引入删除:<android...
    99+
    2023-05-30
    android
  • react在安卓中输入框被手机键盘遮挡怎么办
    这篇文章主要介绍react在安卓中输入框被手机键盘遮挡怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!问题概述今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机...
    99+
    2024-04-02
  • JavaScript怎么利用发布订阅模式编写事件监听函数
    这篇“JavaScript怎么利用发布订阅模式编写事件监听函数”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScri...
    99+
    2023-07-06
  • 怎么在Android应用中利用ListView实现一个监听滑动事件
    怎么在Android应用中利用ListView实现一个监听滑动事件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。ListView的主要有两种滑动事件监听方法,OnTouchLi...
    99+
    2023-05-31
    listview android roi
  • 怎么在pygame中对键盘和鼠标事件进行处理
    本篇文章为大家展示了怎么在pygame中对键盘和鼠标事件进行处理,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。pygame 的常用事件如下所示:事件产生途径参数QUIT用户按下“关闭”按钮NoneA...
    99+
    2023-06-14
  • 怎么在Javascript中添加事件
    怎么在Javascript中添加事件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.添加到元素事件属性上<!DOCTYPE html><html&...
    99+
    2023-06-14
  • Vue引用第三方datepicker插件无法监听datepicker输入框的值怎么办
    小编给大家分享一下Vue引用第三方datepicker插件无法监听datepicker输入框的值怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作