Establecer el enfoque de un elemento de formulario HTML en JavaScript

1. Establecer el enfoque en la entrada con JavaScript
2. Establecer foco en Textarea con JavaScript
3. Establecer el enfoque en el cuadro de selección o menú desplegable con JavaScript

Centrarse en un campo para la entrada del usuario es una función de UI / UX que le permite a uno continuar escribiendo en un campo sin hacer clic en él. Es posible que necesitemos aplicar el enfoque de forma dinámica en un campo de formulario, especialmente si el formulario es largo y tiene muchos campos de entrada. Si un campo de formulario tiene un error de validación, será difícil para el usuario averiguar el campo en tal escenario. Por lo tanto, tener un enfoque establecido en el campo en javascript mientras se valida y se desplaza automáticamente al campo de error indica el error directamente al usuario en lugar de perder el tiempo averiguando dónde estaba el error. En JavaScript tenemos el método .focus(). Veamos cómo podemos aplicarlos a lo siguiente.

Establecer el enfoque en la entrada con JavaScript

Para enfocarnos en un campo de entrada, primero necesitamos seleccionar el campo. Existen varios métodos para hacerlo. Podemos utilizar cualquiera de los siguientes métodos.

• document.getElementById(): Consulta el elemento basándose en su id. Por lo general, los identificadores son únicos, por lo que la función getElementById() devuelve el elemento de forma única. Si hay más elementos con el mismo id, devuelve el primer elemento con el id especificado.
• document.getElementsByClassName(): Selecciona el elemento basándose en su nombre de clase. Por lo general, devuelve un array de elementos que califican los criterios.
• querySelector(): el método JavaScript selecciona el elemento basándose en su id, nombre de clase o incluso con la etiqueta del elemento HTML. La función devuelve un solo elemento HTML que satisface los criterios que se le pasan como parámetro. En este artículo, usaremos la función getElementById() para simplificar la representación. Una vez que tenemos el elemento seleccionado, podemos fijar el foco en el elemento usando el método .focus(). A continuación se muestra la sintaxis de .focus.

document.getElementById('input-id').focus();

Establecer foco en un campo de entrada

Los siguientes conjuntos de códigos se centran en el campo de entrada al cargar la página.

<input id="username-input" type="text" name="username">

window.onload = function() {
  document.getElementById('username-input').focus();
}

Establecer el foco en un campo de entrada en un formulario HTML

Si el elemento de entrada es parte de un formulario, en lugar de consultar el elemento usando getElementById(), podemos usar la referencia del nombre del formulario. La sintaxis de uso es la siguiente:

document.<Form name>.<Field name>.focus();

Por ejemplo, supongamos que tenemos un formulario de inicio de sesión con un campo de entrada. Podemos establecer el foco del campo de entrada aplicando el siguiente código. El código establecerá el foco en el campo de entrada del nombre de usuario. Hay algunas cosas que debe tener en cuenta al usar el nombre del formulario y el nombre del campo para que funcione el siguiente código.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>

window.onload = function() {
  document.LoginForm.UserName.focus();
}

Observaciones

• Al establecer el enfoque de una entrada en un formulario, debemos asignar el atributo de nombre al formulario HTML y al campo al que nos dirigimos. Si no se especifica ningún nombre, será difícil consultar el elemento.
• Este método no admite nombres de etiquetas que tengan guiones en este método. Por lo tanto, el nombre asignado al formulario HTML o al elemento debe ser en mayúsculas (como UserName) o en minúsculas (como nombre de usuario).
• Para formularios más largos con muchos campos como la entrada, áreas de texto, etc., es bueno establecer el atributo de desplazamiento en el elemento para que el navegador autodesplazará el elemento HTML enfocado a la vista. Es un comportamiento previsto esperado por el usuario. De lo contrario, terminará preguntándose por qué el formulario no es válido.

document.getElementById("myButton").focus({preventScroll:false});

Establecer foco en Textarea con JavaScript

Podemos usar la función .focus() para establecer el enfoque en un área de texto. Por lo general, para enfocar en un área de texto usamos document.getElementById (" mi-área-de-texto "). Focus(). Es similar a usar la función .focus() en un campo de entrada. Si pretendemos usar el área de texto dentro de una etiqueta de formulario HTML, entonces podemos aplicar la referencia del nombre del formulario junto con el nombre del área de texto para enfocarlo. Consulte el siguiente código.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>

window.onload = function() {
  document.LoginForm.description.focus();
}

En este método, debemos asignar un nombre al formulario y al elemento HTML de destino. Las reglas para nombrar los elementos son las mismas que las del campo de entrada.

Establecer el enfoque en el cuadro de selección o menú desplegable con JavaScript

El método .focus() funciona en cuadros de selección o menús desplegables. Si se usa dentro de un formulario, entonces el document.FormName.SelectBoxName.focus() se puede usar para establecer el foco en el menú desplegable. A continuación se muestra el código que explica el uso.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.LoginForm.occupationSelect.focus();
}