Olá pessoal, recentemente consegui através dessa comunidade resolver um problema que eu estava tendo, sobre clicar num campo com um determinado placeholder, e este place holder virar a label, logo acima do campo.
O código de exemplo que fizeram para mim foi esse:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="input"></label> <br>
<input id="input" type="text" name="fname" placeholder="Primeiro Nome"><br>
<br>
</form>
<script>
let input = document.querySelector("#input");
input.addEventListener('focusin', function(){
let label = document.querySelector('label[for="input"]');
label.textContent = input.placeholder;
input.placeholder = '';
});
input.addEventListener('focusout', function(){
let label = document.querySelector('label[for="input"]');
input.placeholder = label.textContent;
label.textContent = '';
});
</script>
</body>
</html>E funcionou perfeitamente! Porém no meu código existem 4 labels e cada uma possui um ID diferente.
Como eu poderia alterar este código pra que os 4 campos e labels se comportassem da mesma forma?
Desde já agradeço a atenção e empenho das pessoas deste fórum! :)
