En este artículo, aprenderemos cómo evitar que un campo de texto o una entrada pierdan el foco usando jQuery. Esto se puede usar en situaciones donde se requiere la validación del usuario. Hay dos enfoques que se pueden tomar:
Enfoque 1: utilizaremos los métodos jQuery bind() , val() , preventDefault() y focus() . El método bind() se utiliza para adjuntar un evento de » enfoque de salida » al elemento del campo de texto. Luego se crea una función auxiliar isValidString() que nos ayuda a validar la entrada del usuario en el campo de texto. La función devuelve verdadero si la string es » geeks » y falso en caso contrario. El valor del campo de texto se extrae usando el método val() y se usa como parámetro en isValidString()función. Si la función devuelve falso, evitamos la acción predeterminada del evento » focusout » usando preventDefault() , lo que significa que el campo de texto no perderá el foco. Tan pronto como la entrada en el campo de texto sea «geeks», el flujo de control sale de la instrucción » if » y se restaura la acción predeterminada del evento » focusout «, lo que significa que el campo de texto puede perder el foco.
Ejemplo: aquí, el campo de texto no perderá el foco incluso si hacemos clic fuera del campo de texto si la entrada en el campo de texto no es la palabra » geeks «.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 20px;
font-weight: bold;
}
input {
margin-top: 0.75rem;
}
/* To make input on focus
look more distinct */
input:focus {
outline: none !important;
border: 3px solid green;
box-shadow: 0 0 10px green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>How to prevent a textfield from
losing focus using jQuery</p>
<p>
Here, the textfield will only lose focus
when the word "geeks" is entered
</p>
<input type="text" class="geeks" />
<script type="text/javascript">
$(function () {
$(".geeks").bind("focusout", function (e) {
if (!isValidString($(this).val())) {
e.preventDefault();
$(this).focus();
}
});
});
// Function to check whether the
// string is "geeks" or not
function isValidString(s) {
return s === "geeks";
}
</script>
</body>
</html>
Producción:
Enfoque 2: utilizaremos los métodos jQuery bind() , val() , preventDefault() y focus() . Este enfoque es similar al enfoque anterior, pero la diferencia es que el evento que se adjunta al elemento del campo de texto es » desenfoque » en lugar de » enfoque «. El evento » desenfoque » es similar al evento » focusout «, pero la distinción clave es que el evento » desenfoque » no burbujea. Por lo tanto, si existe el requisito de averiguar si un elemento o su hijo pierden el foco, se debe usar el evento » focusout «.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p {
font-size: 20px;
font-weight: bold;
}
input {
margin-top: 0.75rem;
}
/* To make input on focus
look more distinct */
input:focus {
outline: none !important;
border: 3px solid green;
box-shadow: 0 0 10px green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>How to prevent a textfield from
losing focus using jQuery</p>
<p>
Here, the textfield will only lose
focus when the word "geeks" is entered
</p>
<input type="text" class="geeks" />
<script type="text/javascript">
$(function () {
$(".geeks").bind("blur", function (e) {
if (!isValidString($(this).val())) {
e.preventDefault();
$(this).focus();
}
});
});
// Function to check whether the
// string is "geeks" or not
function isValidString(s) {
return s === "geeks";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA