En escenarios como la validación y verificación de datos, el estilo de los elementos del campo cambia cada vez que el usuario suelta la tecla presionada del teclado. Este cambio de estilo en relación con cada pulsación o liberación de tecla se realiza mediante controladores de eventos proporcionados por jQuery. Para ser específico, el controlador de eventos o método que maneja o invoca la función cuando se suelta cualquier tecla presionada es el ' tecla Arriba ()' método.
Por otro lado, el método que maneja o invoca la tecla de función que se presiona es el “ pulsación de tecla ()” y podrás consultar nuestros asociados artículo para este evento.
En este blog, proporcionaremos una breve descripción del método jQuery keyup().
¿Cómo utilizar el método jQuery keyup()?
El jQuery” tecla Arriba ()”El método activa la función anónima cada vez que el usuario deja de presionar o ingresar las teclas dentro del campo seleccionado. Este método también se utiliza para aplicar un estilo dinámico sobre el elemento seleccionado en tiempo real.
Sintaxis
La sintaxis utilizada para el método jQuery keyup() es la siguiente:
$ ( 'este' ) . tecla Arriba ( función personalizada )
En la sintaxis anterior, “ este ' es el elemento HTML seleccionado y ' función personalizada ' es una función que es ejecutada por el ' tecla Arriba 'Método sobre el' este ”.
Veamos un par de ejemplos para una comprensión más profunda.
Ejemplo 1: cambiar el color del texto usando el método “keyup()”
En este caso, el color del texto ingresado cambiará a un color diferente cuando el usuario suelte la tecla ya presionada como se muestra a continuación:
< HTML >
< cabeza >
< guion src = 'https://code.jquery.com/jquery-3.7.0.js' >< / guion >
< guion >
$(documento).listo(función() {
$('#demo').keyup(función() {
$('#demo').css('color', 'verde bosque');
});
});
< / guion >
< / cabeza >
< cuerpo >
< div >
Ingrese los datos de Linuxhint: < aporte identificación = 'manifestación' tipo = 'texto' / >
< / div >
< / cuerpo >
< / HTML >
La descripción del código anterior se menciona a continuación:
- Primero, importe jQuery al proyecto insertando su CDN en línea visitando este enlace de documentación oficial.
- A continuación, cree una función anónima que se llamará cuando ' documento ”o la página se carga. Esta función selecciona el elemento HTML con una identificación de 'demo' y adjunta el ' tecla Arriba ()” método con él.
- El ' tecla Arriba ()” invoca la función de devolución de llamada que utiliza el “ CSS ()” para establecer el color de fuente del texto en “ bosque verde ”.
- Ahora, cree el “< aporte >” elemento dentro del “< cuerpo >” etiqueta y asígnale una identificación de “ manifestación ”.
Vista previa de la página web después de completar el proceso de compilación:
El resultado muestra que el color del texto cambia cuando se suelta la tecla seleccionada.
Ejemplo 2: cambiar el color de fondo dinámicamente
En este ejemplo, se establecerán diferentes colores de fondo para el elemento HTML seleccionado cada vez que el usuario deje presionada la tecla. Echemos un vistazo al código para este escenario:
< cabeza >< guion src = 'https://code.jquery.com/jquery-3.7.0.js' >< / guion >
< guion >
dejar fondoSombras = [ 'aguamarina' , 'rojo naranja' , 'cadete azul' , 'bosque verde' ,
'gris claro' , 'marrón arena' , 'magenta' , 'burlywood' ] ;
deja j = 0 ;
$ ( documento ) .tecla Arriba ( función ( evento ) {
$ ( '#hgg' ) .css ( 'color de fondo' , fondoSombras [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / guion >
< / cabeza >
< cuerpo >
< h1 estilo = 'color: verde mar' >Artículo Linux< / h1 >< hermano >
< div identificación = 'hgg' estilo = 'relleno: 10px' >
< h2 >jQuery keyup se utiliza para establecer diferentes Fondo cada vez que se suelta la tecla.< / h2 >
< hermano / >
< / div >
< / cuerpo >
Descripción del código anterior:
- Inicialmente, importe jQuery en su proyecto agregando jQuery CDN dentro del campo “< cabeza >”etiqueta.
- Luego, crea una matriz llamada ' fondoSombras ”que contiene ocho colores aleatorios.
- A continuación, el “ tecla Arriba ()” se adjunta al método “ documento ”e invoca una función de devolución de llamada anónima. Esta función selecciona el elemento HTML con una identificación de ' hgg ” y aplica el CSS “ color de fondo ' propiedad.
- La matriz “ fondoSombras ' se pasa como valor para las propiedades CSS y el índice se establece en ' j ' variable. Esta variable se incrementa en uno cada vez y se reinicia desde el ' 0 'índice cuando el valor alcanza' 8 ”. Porque el índice máximo en la matriz es ' 7 ”.
- Después de eso, cree un ' seleccionado ' div 'elemento con una identificación de' hgg ”, el color de fondo de este elemento cambiará cuando se suelte la tecla presionada.
Vista previa de la página web después de la compilación:
El resultado confirma que el color de fondo del elemento HTML seleccionado cambia cada vez que se suelta la tecla presionada o seleccionada. Se trata de utilizar el ' tecla Arriba ()' método.
Conclusión
El jQuery” tecla Arriba ()” activa una función de devolución de llamada en el elemento HTML seleccionado cuando se suelta la tecla presionada. Este método no llama cuando se presiona la tecla, pero al momento de soltarla o al presionar la tecla, esta función ejecuta una función de devolución de llamada. Este blog ha explicado el uso y funcionamiento del método jQuery keyup().