El evento de pérdida de foco puede ocurrir principalmente a través del método focusout() y blur(). Ambos pierden el foco cuando se activa el método. Estos eventos difieren ligeramente entre sí, pero todos tienen el propósito principal de perder el foco.
Focusout() se usa a menudo en combinación con focusin() y blur() se usa a menudo en combinación con focus().
Tenga en cuenta que el método focusout() también se activa cuando los elementos secundarios pierden el foco.
Sintaxis:
$(selector).focusout(function)
o
$(selector).blur(function)
Aquí, la función es el parámetro, que es opcional y ocurre cuando se activan los métodos focusout() y blur().
Ejemplo 1: Este ejemplo muestra el uso de focusout() para perder 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 () {
$("div").focusin(function () {
$(this).css("background-color", "#008000");
});
$("div").focusout(function () {
$(this).css("background-color", "#FFFFFF");
});
});
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<div style="border: 1px dashed green;padding:10px;">
Course: <input type="text"><br>
</div>
<p>
Clicking outside the input text field enables
triggering of focusout event.
</p>
</body>
</html>
Producción:
- Salida normal:
- Cuando se hace clic dentro del campo de texto de entrada:
- Cuando se hace clic fuera del campo de texto, vuelve a la normalidad:
Ejemplo 2: Este ejemplo muestra el uso de blur() para perder 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("Losefocus event occurs");
});
});
</script>
</head>
<body>
<h1 style="color:Green;">
GeeksforGeeks
</h1>
<div style="border: 1px dashed green;padding:10px;">
Course: <input type="text"><br>
</div>
<p>
Clicking outside the input text field
enables triggering of blur event.
</p>
</body>
</html>
Salida:
Salida Normal
- Cuando se hace clic dentro del campo de texto de entrada
- Cuando se hace clic fuera del campo de texto, muestra esta ventana emergente
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA