如何傾聽所有 <input> 事件，然后執行命令

Question

我正在使用幾個輸入字段創建登錄/注冊表單。 我想知道每當有人單擊或在任何輸入字段中輸入值時如何觸發命令。

<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>

我希望每當有人嘗試在輸入字段中輸入內容時，都可以使用標簽創建一些自定義樣式。

這是我想在有人將某些值放入標簽時添加到標簽的CSS：

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

label.highlight {
  color: #fff;
}

這是我無法使用的Javascript代碼：

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')

    }
})

Answer 1

你是這個意思？

如果字段不為空，則更改標簽類

 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> 

Answer 2

您可以遍歷元素並將事件偵聽器附加到每個輸入，也可以在容器上使用事件委托，如下所示：

DOM更改時，將addEventListener添加到所有INPUT元素