4

Criei um fórmulário em que ao clicar em um campo sua borda inferior muda de cor, e usei um onblur() para que a cor volte ao normal ao clicar do lado de fora. Porém, queria que essa função funcionasse individualmente em cada input. Que cada um mude de cor quando for selecionado sem precisar escrever a mesma função várias vezes para cada id. Como posso fazer isso?

<form>

 <input type="number" placeholder="idade" id="a" onclick="azul()" onblur="nada()">

<input type="text" placeholder="nome" id="b" onclick="azul()" onblur="nada()">

(...)

</form>

<script>

function azul(){
    var a = document.getElementById("a");
    a.style.borderBottomColor = "#4976d0";
}

    function nada(){
         var a = document.getElementById("a");
         a.style.borderBottomColor = "transparent";    
    }

</script>
1
  • Cria uma funçao generica, passando 2 parametros, um que seja o id e o outro a cor que deseja
    – Luan Brito
    27/07/2019 às 21:30

2 Respostas 2

3

Você pode selecionar todos os inputs do seu form dessa forma

let inputs = document.querySelectorAll("input");

Apenas note que se você com essa linha todos os inputs da pagina serão selecionados, então se tiver mais inputs na pagina você pode atribuir alguma class para os que você quer selecionar e modificar a linha de cima deixando-a assim

let inputs = document.querySelectorAll("input.suaclasse");

Após selecionar os inputs basta fazer um foreach adicionando os eventos assim

inputs.forEach(input => {

   input.addEventListener("click", () => {
       azul(input);
   });

   input.addEventListener("blur", () => {
       nada(input);
   });

});

Não se esqueça de modificar as suas funções deixando-as dessa forma

function azul(input) {
    input.style.borderBottomColor = "#4976d0";
}

function nada(input) {
   input.style.borderBottomColor = "transparent";
}
1

Só para deixar aqui como referência, consegue fazer o que pretende sem usar javascript, pelo menos para o exemplo que tem na pergunta. Se reparar dá o estilo quando clica (ou seja quando ganha focus) e depois retira o estilo quando clica fora (no blur ou seja quando perde o foco). Através de CSS consegue aplicar estilo ao elemento focado utilizando o pseudo seletor focus.

Veja o exemplo:

input:focus {
  border-bottom-color: red; /*vermelho quando está focado*/
}

input {
  border-bottom-color: transparent;
}
<form>
  <input type="number" placeholder="idade" id="a">
  <input type="text" placeholder="nome" id="b">
  (...)
</form>

Neste exemplo coloquei a borda inferior a vermelho para se notar mais. E para concluir, se consegue fazer com CSS o que estava a fazer com JS então é preferível que o faça com CSS.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .