Para establecer el foco en un elemento de formulario HTML, se puede utilizar el método focus() de JavaScript. Para hacerlo, llame a este método en un objeto del elemento que se va a enfocar, como se muestra en el ejemplo.
Ejemplo 1: el método focus() se establece en la etiqueta de entrada cuando el usuario hace clic en el botón Focus.
<!DOCTYPE html>
<html>
<head>
<title>
Set focus to HTML form element
</title>
</head>
<body>
<p>
Click on button to set focus
on input field
</p>
<form>
<input type="text" id="input1">
<br><br>
<button type="button" onclick="focusInput()">
Set Focus
</button>
</form>
<script>
function focusInput() {
document.getElementById("input1").focus();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo se centra en el campo de entrada automáticamente al cargar la página.
<!DOCTYPE html>
<html>
<head>
<title>
Set focus to HTML form element
</title>
</head>
<body>
<p>
Click on button to focus
on the input field.
</p>
<form>
Name: <input type="text" id="input1">
<br><br>
Age: <input type="text" id="input2">
</form>
<script>
window.onload = function() {
document.getElementById("input1").focus();
}
</script>
</body>
</html>
Producción:
Ejemplo 3: El siguiente programa se enfoca en el campo de entrada cuando se hace clic en el botón Foco. Para desenfocar el campo de entrada enfocado, se puede usar la propiedad blur().
<!DOCTYPE html>
<html>
<head>
<title>
Set focus to HTML form element
</title>
</head>
<body>
<p>
Click on button to focus
on the input field.
</p>
<form>
<input type="text" id="input1">
<br><br>
<button type="button" onclick="focusInput()">
Focus
</button>
<button type="button" onclick="blurInput()">
Blur
</button>
</form>
<script>
function focusInput() {
document.getElementById("input1").focus();
}
function blurInput() {
document.getElementById("input1").blur();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón de enfoque:
- Después de hacer clic en el botón Desenfocar:
Publicación traducida automáticamente
Artículo escrito por BhavyadeepPurswani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA