15

デスクトップでは正常に機能するキーボードイベントを定義しましたが、タッチデバイスではオンスクリーンキーボードイベントを取得しません。ユーザーが入力しているかどうかをキャプチャする必要があります。私は次のコードセグメントを使用しました：

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

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

で定義されたコードが必要でkeydown、keyupタッチデバイス（タブレットとモバイルの両方）でもトリガーされます。画面上のキーボードイベントをキャプチャし、上記のコードを実行する方法を提案してください。

4

3 に答える 3

16

キーダウンの代わりにキープレスを使用してみましたか

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

});

更新しました ：

アンドロイドの問題のため、私は通常、このようにチェックをラップします

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

function keyPress(e){
    doSomething;
}
于 2012-03-30T10:18:41.450 に答える
1

これを解決する1つの方法は、または イベントが検出されないsetInterval場合を使用することです。keyupkeydown

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>

于 2016-09-22T11:39:33.777 に答える
-1

このページの最後の答えは機能します： keypressイベントの後にjquery .val（）を取得するにはどうすればよいですか？-

基本的に、「keyup」を破棄して「input」に変更します。たとえば、$（document）.delegate（'＃q'、'input'、function（e）{etc}

于 2014-11-05T22:49:13.213 に答える