zoukankan      html  css  js  c++  java
  • 键盘事件相关

    转自下面两个链接:http://www.cnblogs.com/starof/p/6558581.html   http://www.cnblogs.com/cathsfz/archive/2011/05/29/2062382.html

    在 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事件(七)事件类型之键盘与文本事件

    • 任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件。
    • textInput事件只会在用户按下能够输入实际字符的键时才会触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(比如退格键)。

    data属性

    textInput事件主要考虑的是字符,因此它的event对象中还包含一个data属性,data值为用户输入的字符。

    • 用户按下S键,data值就是“s”
    • 用户按下上档键时按下S键,data值就是"S"
    EventUtil.addHandler(textbox,"textInput",function(event){
        event=EventUtil.getEvent(event);
        console.log(event.data);
    });   

    inputMethod属性

    另外,event对象上还有一个属性,叫inputMethod,表示文本输入到文本框中的方式。使用这个属性可以确定文本是如何输入到控件中,从而验证其有效性。

    • 0,表示浏览器不确定是怎么输入的
    • 1,表示是使用键盘输入的
    • 2,表示文本是粘贴进来的
    • 3,表示文本是拖放进来的
    • 4,表示文本是使用IME输入的
    • 5,表示文本是通过在表单中选择某一项输入的
    • 6,表示文本是通过手写输入的(比如使用手写笔)
    • 7,表示文本是通过语音输入的
    • 8,表示文本是通过集中方法组合输入的
    • 9,表示文本是通过脚本输入的

    兼容性:支持textInput属性的浏览器有IE9+,Safari和Chrome,只有IE支持inputMethod属性。

    扩展阅读: 

    javaScript事件(一)事件流

    javaScript事件(二)事件处理程序

    javaScript事件(三)事件对象

    javaScript事件(四)event的公共成员(属性和方法)

    javaScript事件(五)事件类型之鼠标事件 

  • 相关阅读:
    Siege 3.0 正式版发布,压力测试工具
    Pomm 1.1.2 发布,专为 PG 设计的 ORM 框架
    Whonix 0.5.6 发布,匿名通用操作系统
    国内开源 java cms,Jspxcms 2.0 发布
    EZNamespaceExtensions.Net v2013增加对上下文菜单、缩略图、图标、属性表的支持
    GNU Guile 2.0.9 发布,Scheme 实现
    jdao 1.0.4 发布 轻量级的orm工具包
    OpenSearchServer 1.4 RC4 发布
    Percona Server for MySQL 5.5.3030.2
    Samba 4.0.5 发布
  • 原文地址:https://www.cnblogs.com/wangjixianyun/p/6582912.html
Copyright © 2011-2022 走看看