How To Listen To All Events and Then Execute A Command

Question

I am creating a sign in / sign up form with several input fields. I want to know how to trigger a command whenever someone clicks or enters a value in any of the input field.

<form action="/" method="post">
    <div class="top-row">
        <div class="field-wrap">
            <label for="name">
                First Name
                <span class="req">*</span>
            </label>
            <input type="text" name="name" required autocomplete="off" />   
        </div>

        <div class="field-wrap">
            <label for="lastname">
                Last Name
                <span class="req">*</span>
            </label>
            <input type="text" name="lastname" required autocomplete="off"/>
        </div>
    </div>

    <div class="field-wrap">
        <label for="email">
            Email Address
            <span class="req">*</span>
        </label>
        <input type="email" name="email" required autocomplete="off" />
    </div>

    <div class="field-wrap">
        <label for="password">
            Password
            <span class="req">*</span>
        </label>
        <input type="password" name="password" required autocomplete="off" />
    </div>

    <button type="submit" class="button button-block">Get Started</button>
</form>

I want to be able to create some custom styling with the labels whenever someone tries to input something on the input field.

Here's the CSS I want to add to the tag whenever someone places some value in the tag:


label.active {
  transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}

label.highlight {
  color: #fff;
}

Here's my non-working Javascript code:

const inputs = document.querySelectorAll('input');

inputs.addEventListener('keyup focus blur', ()=> {
    if(inputs.length > 0) {
        inputs.previousElementSibling.classList.add('active highlight')
    } else {
        inputs.previousElementSibling.classList.remove('active highlight')

    }
})

mplungjan · Accepted Answer · 2019-09-17T14:06:58.110

You mean this?

Change the label class if field not empty

function listen(e) {
  var tgt = e.target;
  if (tgt.tagName === "INPUT") {
    tgt.previousElementSibling.classList.toggle('active', tgt.value.trim() !== "");
  }
}
document.getElementById("myForm").addEventListener("input", listen)
document.getElementById("myForm").addEventListener("focus", listen)
document.getElementById("myForm").addEventListener("blur", listen)

label.active {
  transform: translateY(50px);
  left: 2px;
  font-size: 14px;
  color:green;
}

<form action="/" method="post" id="myForm">
  <div class="top-row">
    <div class="field-wrap">
      <label for="name">First Name <span class="req">*</span></label>
      <input type="text" name="name" required autocomplete="off" />
    </div>
    <div class="field-wrap">
      <label for="lastname">Last Name <span class="req">*</span></label>
      <input type="text" name="lastname" required autocomplete="off" />
    </div>
  </div>
  <div class="field-wrap">
    <label for="email">Email Address <span class="req">*</span></label>
    <input type="email" name="email" required autocomplete="off" />
  </div>
  <div class="field-wrap">
    <label for="password">Password <span class="req">*</span></label>
    <input type="password" name="password" required autocomplete="off" />
  </div>
  <button type="submit" class="button button-block">Get Started</button>
</form>

score 0 · Answer 2 · answered Sep 17 '19 at 13:44

0

You can loop through the elements and attach an event listener to each of the inputs or you can use event delegation on the container as detailed here:

addEventListener to ALL INPUT elements when DOM changes

answered Sep 17 '19 at 13:44

dmr

9
2

How To Listen To All Events and Then Execute A Command

2 Answers2