如何捕获触摸设备的屏幕键盘“keydown”和“keyup”事件答案

【问题标题】：How to capture the onscreen keyboard 'keydown' and 'keyup' events for touch devices如何捕获触摸设备的屏幕键盘“keydown”和“keyup”事件
【发布时间】：2012-04-14 00:17:16
【问题描述】：

我已经定义了在桌面上运行良好的键盘事件，但对于没有获得屏幕键盘事件的触摸设备。如果用户正在输入，我需要捕获。我使用了以下代码段：

$('#id').keydown(function(e){
  //some code here
});

$('#id').keyup(function(e){
  //some code here
})

我希望keydown 和keyup 中定义的代码即使对于触摸设备（平板电脑和手机）也能触发。请建议如何捕获屏幕键盘事件并使上述代码运行。

【问题讨论】：

您具体谈论的是哪些设备？上面的代码适用于 iPhone/Pad/Pod 的 Safari。
@mamoo ipad,iphone,android。但这在 Safari 中对我不起作用
我测试了以下代码：jsfiddle.net/dzKtw/1 它对我有用...
它是否与 setInterval 函数一起使用。我已经定义了 setInterval 并且每 1 秒检查一次文本框是否为空白或用户是否输入了任何文本，或者隐藏或显示明文图像。但这在我的情况下似乎不起作用，不理解为什么
如何在安卓设备上解决这个问题？

标签： javascript jquery keyboard touch on-screen-keyboard

【解决方案1】：

您是否尝试过使用按键而不是按键

$("#id").keypress(function() {

});

更新：

由于 android 的问题，我现在通常像这样包装我的支票

if ($.browser.mozilla) {
    $("#id").keypress (keyPress);
} else {
    $("#id").keydown (keyPress);
}

function keyPress(e){
    doSomething;
}

【讨论】：

这是一个很老的答案，我想最近我遇到了这个问题，现在通过简单的检查解决了这个问题。我已经更新了我的答案，看看是否可行，让我知道你的进展情况。
$.browser 在 jq 1.9 中已弃用和删除。

【解决方案2】：

解决此问题的一种方法是在 keyup 时使用 setInterval 或未检测到keydown 事件。

var keyUpFired = false;
$('#input').on('keyup',function() {
    keyUpFired = true;
    // do something
});
if( keyUpFired === false) {
    setInterval(function() {
        if($('#input').val().length>0) {
        // do something         
        }
    },100); 
}

这是一个使用Materialize 的小示例，用于在触摸设备中进行测试。

$(document).ready(function() {
var keyUpFired = false;
$('#input').on('keyup',function() {
keyUpFired = true;
if ($('#input').get(0).checkValidity() === true) {
$('label[for="input"]').attr('data-success','Custom Success Message: You typed...'+$(this).val());
} else {
$('label[for="input"]').attr('data-error','Custom Error Message: Username too small');	         
}
validate_field($('#input')); 
});
if(	keyUpFired == false) {
setInterval(function() {
if($('#input').val().length>0) {
if ($('#input').get(0).checkValidity() !== false) {
$('label[for="input"]').attr('data-success','Custom Success Message: You typed...'+$('#input').val());
} else {
$('label[for="input"]').attr('data-error','Custom Error Message: Username too small');	         
}
validate_field($('#input')); 	
}
},100);	
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
 <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input placeholder="5-20 characters..." id="input" pattern=".{5,20}" type="text" class="validate">
          <label for="input" data-error="wrong" data-success="right">Username</label>
        </div>
      </div>
    </form>
  </div>

【讨论】：

【解决方案3】：

此页面上的最后一个答案有效： How can I get jquery .val() AFTER keypress event? -

基本上放弃“keyup”并改为“input”，例如： $(document).delegate('#q', 'input', function(e) { etc }

【讨论】：