javascript - escribir - Cómo capturar los eventos ''keydown'' y ''keyup'' del teclado en pantalla para dispositivos táctiles

onkeyup javascript ejemplo

Question

He definido eventos de teclado que funcionan bien en el escritorio, pero para dispositivos táctiles que no reciben el evento del teclado en pantalla. Necesito capturar si el usuario está escribiendo. He utilizado el siguiente segmento de código:

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

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

Quiero que el código definido en keydown y keyup active incluso para dispositivos táctiles (tabletas y móviles). Sugiera cómo capturar el evento del teclado en pantalla y haga que se ejecute el código anterior.

Answer 1

¿Has probado presionando la tecla en lugar de presionar

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

});

Actualizado :

Debido a los problemas de Android ahora normalmente envuelvo mis cheques de esta manera

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

function keyPress(e){
    doSomething;
}

Answer 2

Una forma de resolver esto es mediante el uso de setInterval cuando no se detectan los eventos de keyup o 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); 
}   

Aquí hay un pequeño ejemplo con Materialize para probar en dispositivos táctiles.

$(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>

Answer 3

La última respuesta en esta página funciona: ¿Cómo puedo obtener jquery .val () DESPUÉS de presionar tecla evento? -

Básicamente descarte la "llave" y cambie a "entrada", algo como: $ (documento) .delegar (''# q'', ''entrada'', función (e) {etc}