Como colocar o ponteiro do mouse no fim do input com JavaScript

Neste artigo você vai aprender a como colocar o ponteiro do mouse no fim do input utilizando recursos da linguagem JavaScript

Fala programador(a), beleza? Bora aprender mais sobre formulários e JavaScript!

A função colocar o cursor no fim do input é utilizada para dar continuidade as informações já preenchidas

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Para executar isso com JS precisaremos fazer a seleção do input e depois trabalhar no evento de focus do mesmo

Ou seja, quando alguem clica naquele input

Veja o código que precisamos:

const input = document.querySelector("#my-input")

input.addEventListener("focus", (e) => {
	cursorToEnd(e)
})

function cursorToEnd(e) {
  if (typeof e.target.selectionStart == "number") {
      e.target.selectionStart = e.target.selectionEnd = e.target.value.length;
  } else if (typeof e.target.createTextRange != "undefined") {           
      const range = e.target.createTextRange();
      range.collapse(false);
      range.select();
  }
}

Nas duas primeiras instruções fizemos o que foi prosto:

• Selecionar o elemento;
• Ativar um evento no focus do input;
• Criamos uma função para realizar a ação;

Esta função foi criada pensando em reutilização do código, podendo reaproveitar em outros inputs também

Temos uma bifurcação no código, pois o input de number trabalha de forma diferente dos outros

Nos códigos da função, estamos basicamente pegando a quantidade de caracteres e mandando o cursor para depois do último, que é o que precisamos 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como colocar o ponteiro do mouse no fim do input

Utilizamos a seleção de elementos, o evento focus, e uma função

Esta função detecta a quantidade de caracteres no input e coloca o ponteiro depois do último dos caracteres

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!