How can you toggle a class on an element when an input has text in it?

Question

I'm just learning JavaScript and haven't found any vanilla JS solutions for this problem. I'm working on a floating label form group, where the label for an input is 'tucked away' behind the input. I want it to rise when the input has text in it by toggling the class 'form-group-with-value'. I don't know any jQuery and I'd like to avoid it. Here's my code: PS: I've managed to toggle a class when an input is in focus (to change the color of the label). Although it's really not the best solution, it works as is.

 //Dynamic Form Label const input = document.querySelectorAll('.custom-input'); const formGroup = document.querySelectorAll('.form-group'); //Toggle color when input is in focus input[0].addEventListener('focus', () => formGroup[0].classList.toggle('form-group-with-focus') ); input[0].addEventListener('blur', () => formGroup[0].classList.toggle('form-group-with-focus') ); input[1].addEventListener('focus', () => formGroup[1].classList.toggle('form-group-with-focus') ); input[1].addEventListener('blur', () => formGroup[1].classList.toggle('form-group-with-focus') ); input[2].addEventListener('focus', () => formGroup[2].classList.toggle('form-group-with-focus') ); input[2].addEventListener('blur', () => formGroup[2].classList.toggle('form-group-with-focus') ); input[3].addEventListener('focus', () => formGroup[3].classList.toggle('form-group-with-focus') ); input[3].addEventListener('blur', () => formGroup[3].classList.toggle('form-group-with-focus') ); //Toggle label position when input has value

 .form-group{ position: relative; min-height: 50px; } .form-group label{ position: absolute; z-index: -1; transition: 0.3s; left: 5px; } .form-group-with-focus label{ color: red; } .form-group-with-value label{ transform: translateY(-80%); }

 <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div> <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div> <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div> <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div>

have mercy pls, I'm a beginner

Answer 1

To simplify your code, you can loop through the inputs and generate a single event handler instead of multiple. Plus you can call the input's parent node to toggle the class on.

Plus you don't want to toggle if you only want the label to show if the input has value.

I chose the input event as it covers paste as well as keyboard entry.

 //Dynamic Form Label const input = document.querySelectorAll('.custom-input'); input.forEach(function(el) { el.addEventListener('input', function(e) { if (e.target.value == "") { e.target.parentNode.classList.remove('form-group-with-value') } else { e.target.parentNode.classList.add('form-group-with-value') } }); });

 .form-group { position: relative; min-height: 50px; } .form-group label { position: absolute; z-index: -1; transition: 0.3s; left: 5px; } .form-group-with-focus label { color: red; } .form-group-with-value label { transform: translateY(-80%); }

 <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div> <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div> <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div> <div class="form-group "> <label>Full Name</label> <input type="text" class="form-control custom-input" id="name" placeholder="Full Name"> </div>

Answer 2

如果您希望在用户键入时调用某些 JS/Function，您可以使用keyPress或keyUp事件。