Definir o foco de um elemento de formulário HTML em JavaScript

1. Definir o foco na entrada com JavaScript
2. Definir o foco na área de texto com JavaScript
3. Defina o foco na caixa de seleção ou no menu suspenso com JavaScript

O foco em um campo para entrada do usuário é um recurso de UI / UX que permite continuar digitando em um campo sem clicar nele. Podemos precisar aplicar o foco dinamicamente em um campo de formulário, especialmente se o formulário for longo e tiver muitos campos de entrada. Se um campo de formulário tiver um erro de validação, será difícil para o usuário descobrir o campo em tal cenário. Portanto, ter um foco definido para o campo em javascript enquanto valida e rola automaticamente para o campo de erro indica o erro diretamente para o usuário, em vez de perder tempo tentando descobrir onde o erro estava. Em JavaScript temos o método .focus(). Vamos ver como podemos aplicá-los ao seguinte.

Definir o foco na entrada com JavaScript

Para focar em um campo de entrada, primeiro precisamos selecionar o campo. Existem vários métodos para fazer isso. Podemos usar qualquer um dos seguintes métodos.

• document.getElementById(): consulta o elemento com base em seu id. Normalmente os ids são únicos, portanto, a função getElementById() retorna o elemento exclusivamente. Se houver mais elementos com o mesmo id, ele retornará o primeiro elemento com o id especificado.
• document.getElementsByClassName(): Seleciona o elemento com base em seu nome de classe. Geralmente retorna um array de elementos que qualificam os critérios.
• querySelector(): o método JavaScript seleciona o elemento com base em seu id, nome de classe ou mesmo com a tag do elemento HTML. A função retorna um único elemento HTML que satisfaz os critérios passados ​​como parâmetro para ela. Neste artigo, usaremos a função getElementById() para simplificar a representação. Assim que tivermos o elemento selecionado, podemos definir o foco no elemento usando o método .focus(). A seguir está a sintaxe para .focus.

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

Definir o foco em um campo de entrada

O código a seguir define o foco no campo de entrada no carregamento da página.

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

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

Definir o foco em um campo de entrada em um formulário HTML

Se o elemento de entrada for parte de um formulário, em vez de consultar o elemento usando getElementById(), podemos usar a referência do nome do formulário. A sintaxe de uso é a seguinte:

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

Por exemplo, suponha que temos um formulário de login com um campo de entrada. Podemos definir o foco do campo de entrada aplicando o código a seguir. O código definirá o foco no campo de entrada do nome do usuário. Há algumas coisas a serem feitas ao usar o nome do formulário e o nome do campo para que o código a seguir funcione.

<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();
}

Observações

• Ao definir o foco de uma entrada em um formulário, devemos atribuir o atributo de nome ao formulário HTML e ao campo que estamos almejando. Se nenhum nome for especificado, será difícil consultar o elemento.
• Este método não oferece suporte a nomes de tag com hífens neste método. Portanto, o nome atribuído ao formulário HTML ou ao elemento deve ser maiúsculo (como UserName) ou minúsculo (como nome de usuário).
• Para formulários mais longos com muitos campos, como entrada, áreas de texto, etc., é bom definir o atributo scroll para o elemento, de modo que o navegador role automaticamente o elemento HTML focalizado para exibição. É um comportamento pretendido, esperado pelo usuário. Caso contrário, ele vai acabar se perguntando por que o formulário é inválido.

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

Definir o foco na área de texto com JavaScript

Podemos usar a função .focus() para definir o foco para uma área de texto. Normalmente, para focar em uma área de texto, usamos document.getElementById("my-text-area").focus(). É semelhante a usar a função .focus() em um campo de entrada. Se pretendemos usar a área de texto dentro de uma tag de formulário HTML, podemos aplicar a referência do nome do formulário junto com o nome da área de texto para focar nela. Consulte o código a seguir.

<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();
}

Neste método, devemos atribuir um nome ao formulário e ao elemento HTML de destino. As regras para nomear os elementos são as mesmas do campo de entrada.

Defina o foco na caixa de seleção ou no menu suspenso com JavaScript

O método .focus() funciona em caixas de seleção ou suspensas. Se usado em um formulário, então document.FormName.SelectBoxName.focus() pode ser usado para definir o foco para o menu suspenso. A seguir está o código elaborando sobre o 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();
}