.keypress (controlador)Devoluciones: jQuery

Descripción: Vincula un controlador de eventos al evento de JavaScript de “pulsación de tecla” o activa ese evento en un elemento.

  • versión agregada: 1.0.keypress (controlador)

    • manipulador Tipo: Función (Event eventObject) Una función que se ejecuta cada vez que se activa el evento.

  • versión agregada: 1.4.3.keypress ( [eventData ], manipulador )

    • eventData Tipo: Cualquier objeto Un objeto que contiene datos que se pasarán al controlador de eventos.
    • manipulador Tipo: Función (Event eventObject) Una función que se ejecuta cada vez que se activa el evento.

  • versión agregada: 1.0.keypress ()

    • Esta firma no acepta argumentos.

Nota: como el keypress El evento no está cubierto por ninguna especificación oficial, el comportamiento real que se encuentra al usarlo puede diferir entre navegadores, versiones de navegadores y plataformas.

Este método es un atajo para .on( "keypress", handler ) en las dos primeras variaciones, y .trigger( "keypress" ) en el tercero.

los keypress El evento se envía a un elemento cuando el navegador registra la entrada del teclado. Esto es similar al keydown evento, excepto que las teclas modificadoras y no imprimibles, como Cambio, Esc, y Eliminar desencadenar keydown eventos pero no keypress eventos. Pueden surgir otras diferencias entre los dos eventos según la plataforma y el navegador.

A keypress El controlador de eventos se puede adjuntar a cualquier elemento, pero el evento solo se envía al elemento que tiene el foco. Los elementos enfocables pueden variar entre navegadores, pero los controles de formulario siempre pueden enfocarse, por lo que son candidatos razonables para este tipo de evento.

Por ejemplo, considere el HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there">
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

El controlador de eventos se puede vincular al campo de entrada:

$( "#target" ).keypress(function() {
  console.log( "Handler for .keypress() called." );
});

Ahora, cuando el punto de inserción está dentro del campo, al presionar una tecla se muestra el registro:

Se llama al controlador de .keypress ().

Para activar el evento manualmente, aplique .keypress() sin un argumento:

$( "#other" ).click(function() {
  $( "#target" ).keypress();
});

Después de que este código se ejecute, haga clic en el Activar el controlador div también registrará el mensaje.

Si es necesario detectar las pulsaciones de teclas en cualquier lugar (por ejemplo, para implementar teclas de método abreviado globales en una página), es útil adjuntar este comportamiento a la document objeto. Debido a la propagación de eventos, todas las pulsaciones de teclas subirán del DOM al document objeto a menos que se detenga explícitamente.

Para determinar qué carácter se ingresó, examine el event objeto que se pasa a la función del controlador. Mientras que los navegadores utilizan diferentes propiedades para almacenar esta información, jQuery normaliza la .which propiedad para que pueda usarla de manera confiable para recuperar el código de carácter.

Tenga en cuenta que keydown y keyup proporcionar un código que indique qué tecla se presiona, mientras keypress indica qué carácter se ingresó. Por ejemplo, una “a” minúscula se informará como 65 por keydown y keyup, pero como 97 por keypress. Todos los eventos informan que una “A” mayúscula es 65. Debido a esta distinción, al detectar pulsaciones de teclas especiales, como las teclas de flecha, .keydown() o .keyup() es una mejor opción.

Notas adicionales:

  • Como el .keypress() El método es solo una abreviatura de .on( "keypress", handler ), la separación es posible usando .off( "keypress" ).

Ejemplo:

Muestra el objeto de evento cuando se presiona una tecla en la entrada. Nota: Esta demostración se basa en un simple complemento $ .print () (https://api.jquery.com/resources/events.js) para la salida del objeto de evento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keypress demo</title>
  <style>
  fieldset {
    margin-bottom: 1em;
  }
  input {
    display: block;
    margin-bottom: .25em;
  }
  #print-output {
    width: 100%;
  }
  .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script src="/resources/events.js"></script>
 
<script>
var xTriggered = 0;
$( "#target" ).keypress(function( event ) {
  if ( event.which == 13 ) {
     event.preventDefault();
  }
  xTriggered++;
  var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
});
 
$( "#other" ).click(function() {
  $( "#target" ).keypress();
});
</script>
 
</body>
</html>

Manifestación: