Olá, gostaria de uma ajuda pra alterar algo no projeto, quando eu clico em "Adicionar nova tarefa" gostaria que a textArea já estivesse selecionada para apenas digitar, sem precisar clicar nela com o mouse para aí sim digitar e também que a barra de rolagem já fosse para baixo pra mostrar o que estou digitando, pois quando clico em adicionar nova tarefa ela abre o campo mais embaixo e tenho que rolar com a barra para ver/alterar o conteúdo. Tentei colocar o atributo "autofocus" no do HTML mas não funcionou, também tentei adicionando algumas coisas no evento de click no JS e não funcionou novamente. Desde já agradeço.</p>
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas
respostas
[Dúvida] Como colocar um "autofocus" quando clicar em "Adicionar nova tarefa"?
solução!
Olá, Cristian! Entendo que você quer melhorar a usabilidade do seu projeto, e isso é ótimo! Vamos lá.
Primeiro, para fazer com que o cursor vá automaticamente para a textArea quando você clicar em "Adicionar nova tarefa", você pode usar o método focus() do JavaScript. Este método, quando aplicado a um elemento do DOM, faz com que o cursor vá direto para esse elemento. Aqui está um exemplo:
document.getElementById("meuTextArea").focus();
Neste exemplo, "meuTextArea" seria o id do seu elemento textArea. Você pode colocar essa linha de código no evento de clique do botão "Adicionar nova tarefa".
Agora, para fazer com que a barra de rolagem vá automaticamente para o final da página quando o textArea for selecionado, você pode usar o método scrollIntoView() do JavaScript. Este método, quando aplicado a um elemento do DOM, faz com que o elemento seja exibido na janela. Aqui está um exemplo:
document.getElementById("meuTextArea").scrollIntoView(false);
Neste exemplo, "meuTextArea" seria o id do seu elemento textArea. O parâmetro false faz com que o elemento seja exibido na parte inferior da janela. Você pode colocar essa linha de código logo após a linha que aplica o método focus().
Lembre-se de substituir "meuTextArea" pelo id real do seu elemento textArea.
Espero ter ajudado e bons estudos!
Era isso mesmo que eu queria fazer, muito obrigado pela ajuda!!