.keyup (controlador)Devoluciones: jQuery

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

  • versión agregada: 1.0.keyup (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.tecla Arriba( [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.tecla Arriba()

    • Esta firma no acepta argumentos.

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

los keyup El evento se envía a un elemento cuando el usuario suelta una tecla del teclado. 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 los navegadores, pero los elementos del formulario siempre pueden enfocarse, por lo que son candidatos razonables para este tipo de evento.

Por ejemplo, considere el HTML:

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

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

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

Ahora, cuando el punto de inserción está dentro del campo y se presiona y suelta una tecla, se muestra la alerta:

Se llama al controlador de .keyup ().

Para activar el evento manualmente, aplique .keyup() sin argumentos:

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

Después de que este código se ejecute, haga clic en Activar el controlador también alertará 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é tecla se presionó, examine el objeto de evento 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 clave. Este código corresponde a una tecla del teclado, incluidos los códigos para teclas especiales como flechas. Para captar la entrada de texto real, .keypress() puede ser una mejor opción.

Notas adicionales:

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

Ejemplo:

Muestre el objeto de evento para el controlador de keyup (usando un simple complemento $ .print) cuando se suelta una tecla en la entrada.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keyup 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 type="text/javascript" src="/resources/events.js"></script>
 
<script>
var xTriggered = 0;
$( "#target" ).keyup(function( event ) {
  xTriggered++;
  var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
}).keydown(function( event ) {
  if ( event.which == 13 ) {
    event.preventDefault();
  }
});
 
$( "#other").click(function() {
  $( "#target" ).keyup();
});
</script>
 
</body>
</html>

Manifestación: