微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用jQueryMobile捕获BlackBerry中的退格键

有没有办法在BlackBerry中的输入[type =“text”]上捕获退格键?我尝试过$(‘input [type =“text”]’).bind(‘keydown’,function(event){…});并且它捕获除退格(del)之外的所有按键事件.按此键不会触发任何键事件.

有谁知道捕捉事件的方法

我正在为OS 6.0开发并使用BlackBerry模拟器9800进行测试.

编辑 – 我正在测试的代码

<div id="myPage" data-role="page" data-theme="b">

  <div data-role="content">  
    <input type="text"  id="ddd" />
  </div>

  <script type="text/javascript">
    $('input[type="text"]').bind('keydown',function(e){
      if(e.keyCode == 8)
        alert('backspace trapped')
    });
  </script>

</div>

解决方法

我刚刚遇到这种烦恼,并在我寻找答案时发现了这个问题,所以这里有我的调查和解决方案的详细信息(好的,解决方法).

当按下退格键时,不会在BlackBerry浏览器中的input或textarea元素上触发keyup和keydown事件.但是,当事件处理程序绑定到文档时,它将被触发:

$("#myInput").keydown(someFn); //Will not fire for backspace
$(document).keyup(someFn); //Will fire for backspace

为什么会这样,我完全不知道. keyup事件应该冒泡,但确实如此,但是当你按下退格键时它甚至不会触发,这没什么用处.

但是,还有另一个事件可供我们使用. BlackBerry浏览器支持输入事件,并且只要元素的值发生变化,就会正确触发(包括,幸运的是,当这个更改是由于按下退格键时).

因此,我们可以通过将事件处理程序绑定到keydown和input来解决问题. keydown事件将在输入之前触发,除非按下退格键,在这种情况下keydown不会触发.所以我们可以很容易地跟踪它:

function handler(e) {
    if (e.keyCode === 8) {
        alert("Backspace!"); //Backspace was pressed :)
    }
}

var elem = document.getElementById("example");
elem.addEventListener("keydown",function (e) { //Bind to keydown event
    this.keydownFired = true; //Remember that keydown fired in expando property
    handler.call(this,e); //Call the event handler
},false)
elem.addEventListener("input",function (e) { //Bind to input event
    if (!this.keydownFired) { //Keydown didn't fire,must have pressed backspace
        e.keyCode = 8; //Fix the event object
        handler.call(this,e); //Call the event handler
    }
    delete this.keydownFired; //Clean up so we can handle next key press
},false);

一些说明:

>据我所知,这只是BlackBerry 6浏览器中的一个问题.我测试了BlackBerry 5(物理设备和模拟器)和7(模拟器),两者都将触发退格键的keydown和keyup事件.
>这个“修复”几乎适用于我测试过的每一个浏览器(所以你可以使用它来正确支持BlackBerry 6而不会破坏其他浏览器),除了Opera Mobile(在12版中测试),由于某种原因,它喜欢点火有时输入事件两次.
>这只允许您在要删除的输入中有文本时检测退格键(否则输入事件不会触发).这可能是剧本最大的垮台.
>您可以找到一个工作示例here,但对于移动设备测试,可以更快地加载embedded version.

原文地址:https://www.jb51.cc/jquery/178588.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐