Как записывать события нажатия клавиши и нажатия клавиши на экранной клавиатуре для сенсорных устройств

Я определил события клавиатуры, которые хорошо работают на рабочем столе, но для сенсорных устройств не отображаются события экранной клавиатуры. Мне нужно сделать снимок, если пользователь печатает. Я использовал следующий фрагмент кода:

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

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

Я хочу, чтобы код, определенный в keydown и keyup, запускался даже для сенсорных устройств (планшетов и мобильных телефонов). Пожалуйста, предложите, как записать событие экранной клавиатуры и запустить приведенный выше код.


javascript keyboard touch jquery on-screen-keyboard
person user850234    schedule 30.03.2012    source источник
comment
О каких именно устройствах вы говорите? Приведенный выше код работает в Safari для iPhone / Pad / Pod.   -  person mamoo    schedule 30.03.2012
comment
@mamoo ipad, iphone, android. Но у меня это не работает в сафари   -  person user850234    schedule 30.03.2012
comment
Я протестировал следующий код: jsfiddle.net/dzKtw/1, и у меня он работает ...   -  person mamoo    schedule 30.03.2012
comment
работает ли он с функцией setInterval. Я определил setInterval, и каждую секунду я проверяю, является ли текстовое поле пустым или пользователь ввел какой-либо текст и, в качестве альтернативы, скрывает или отображает изображение с открытым текстом. Но в моем случае это, похоже, не работает, я не понимаю, почему   -  person user850234    schedule 30.03.2012
comment
Как решить эту проблему на Android-устройствах?   -  person Foreever    schedule 03.02.2014
comment
stackoverflow.com/a/25172585/312598   -  person sebpiq    schedule 16.05.2016
comment
Ошибка Android: bugs.chromium.org/p/chromium/issues/detail ? id = 118639   -  person nothingisnecessary    schedule 15.12.2016

Ответы (3)


arrow_upward
16
arrow_downward

Вы пробовали использовать нажатие клавиши вместо нажатия клавиши?

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

});

Обновлено:

Из-за проблем с Android я теперь обычно оборачиваю свои чеки вот так

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

function keyPress(e){
    doSomething;
}
person Dominic Green    schedule 30.03.2012
comment
Это довольно старый ответ, я думаю, что недавно я столкнулся с этой проблемой и решил ее на данный момент, выполнив простую проверку. Я обновил свой ответ, посмотрите, работает ли это, дайте мне знать, как у вас дела. - person Dominic Green; 03.02.2014
comment
$.browser устарело и удалено в jq 1.9. - person px5x2; 15.09.2015

arrow_upward
1
arrow_downward

Один из способов решить эту проблему - использовать setInterval, когда keyup или 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>

person Community    schedule 22.09.2016

arrow_upward
-1
arrow_downward

Последний ответ на этой странице работает: Как получить jquery. val () ПОСЛЕ события нажатия клавиши? -

В основном откажитесь от «keyup» и измените на «input», что-то вроде: $ (document) .delegate ('# q', 'input', function (e) {etc}

person Paul Keane    schedule 05.11.2014