 |
Evento blur()
Evento blur()
El evento de desenfoque ocurre cuando un elemento pierde el foco. El método blur () activa el evento de desenfoque o adjunta una función para que se ejecute cuando ocurre un evento de desenfoque.
Sugerencia: este método se usa a menudo junto con el método focus () .
Ejemplo
Adjunte una función al evento de desenfoque. El evento de desenfoque ocurre cuando el campo <input> pierde el foco:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").blur(function(){
alert("Este campo de entrada ha perdido su enfoque.");
});
});
</script>
</head>
<body>Entre su nombre: <input type="text">
<p>Escriba algo en el campo de entrada y luego haga clic fuera del campo para perder el enfoque (desenfoque).</p>
</body>
</html>
El evento blur se dispara cuando pierde el foco el control.
Podemos capturar el evento blur de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.
Para probar su funcionamiento dispondremos dos controles de tipo text con algún contenido. Fijaremos de color azul su fuente. Al tomar foco el control cambiará a color rojo y al perder el foco volverá a color azul.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos18.css" type="text/css">
</head>
<body>
<form action="#" method="post">
<input type="text" name="text1" id="text1" value="Hola" size="20">
<br>
<input type="text" name="text2" id="text2" value="Hola" size="20">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func17.js"></script>
</body>
</html>
func18.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#text1");
x.focus(tomaFoco);
x.blur(pierdeFoco);
x = $("#text2");
x.focus(tomaFoco);
x.blur(pierdeFoco);
}
function tomaFoco() {
let x = $(this);
x.css("color", "#f00");
}
function pierdeFoco() {
let x = $(this);
x.css("color", "#00f");
}
estilos18.css
#text1,#text2 {
color:#00f;
}
En la función inicializarEventos asociamos los eventos focus y blur a los dos controles:
function inicializarEventos() {
let x = $("#text1");
x.focus(tomaFoco);
x.blur(pierdeFoco);
x = $("#text2");
x.focus(tomaFoco);
x.blur(pierdeFoco);
}
El evento tomaFoco cambia de color a rojo al texto del control seleccionado:
function tomaFoco() {
let x = $(this);
x.css("color", "#f00");
}
De forma similar pierdeFoco cambia a azul:
function pierdeFoco() {
let x = $(this);
x.css("color", "#00f");
}