[英]How To Listen To All <input> Events and Then Execute A Command
我正在使用几个输入字段创建登录/注册表单。 我想知道每当有人单击或在任何输入字段中输入值时如何触发命令。
<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')
}
})
你是这个意思?
如果字段不为空,则更改标签类
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>
您可以遍历元素并将事件侦听器附加到每个输入,也可以在容器上使用事件委托,如下所示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.