Clicar em botão sem tirar foco do campo com JavaScript

3d atrás

Ion

---

0 0

Muitos aplicativos precisam ser rápidos e fáceis de usar. Por exemplo, quando clicamos em um botão, o normal é que ele tire o foco de onde estamos escrevendo.

Isso pode atrapalhar o uso do aplicativo, porque a pessoa vai ter que clicar de novo no campo para continuar escrevendo. Em celulares, isso é ainda pior, porque o teclado fecha e a pessoa perde tempo.

Mas com #JavaScript, podemos melhorar isso, aqui vai um exemplo. Primeiro no HTML, adicione um input e um botão:

<input>

<button>ENVIAR</button>

Veja que quando você clica no botão, o input perde o foco, no mobile você pode perceber ainda que o teclado vai fechar.

O que é preciso fazer é criar um listener para o evento mousedown, e prevenir a execução do comportamento padrão, o código ficará assim:

document.querySelector('button').addEventListener('mousedown', e => {
	e.preventDefault();

	document.querySelector('input').value = ''; // Aqui você pode substituir por qualquer outra ação, atualmente está apenas limpando o valor do input
});