单击时更改元素颜色，单击关闭时再更改元素颜色

Question

我正在尝试让我使用的字体很棒的图标在用javascript点击输入时改变颜色，并在点击关闭时恢复正常。

我的问题是它只适用于一个输入，我需要它适用于4个不同的输入。谢谢

const User = document.getElementById("User-icon");
const Name = document.getElementById("Name");
Name.addEventListener("click", function(Name) {
User.style.color = "#0773b5";
Name.preventDefault();
Name.stopPropagation();
});
window.onclick = function(Name) {
User.style.color = "rgba(211,211,211,1)";
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="Wrapper">
<h1>Contact Us</h1>
<div class="Contact-form">
<form id="reset">
<div class="form-group" id="Name-group">
<i class="fas fa-user" id="User-icon"></i>
<input type="text" name="name" class="form-control" id="Name" autocomplete="on" placeholder="Name" required>
</div>
<div class="form-group" id="Phone-group">
<i class="fas fa-phone" id="Phone-icon"></i>
<input type="text" name="phone" class="form-control" id="Phone" autocomplete="on" placeholder="Phone" required>
</div>
<div class="form-group" id="Email-group">
<input type="email" name="email" class="form-control" id="Email" autocomplete="on" required onkeydown="validation()">
</div>
<div class="form-group" id="Message-group">
<textarea class="form-control" id="Message" rows="5" cols="5" name="message" required></textarea>
</div>
<div class="form-group" id="Submit-button">
<input type="submit" name="" id="btn" class="form-control btn btn-default" value="Send">
</div>
<div id="msg"></div>
</div>
</div>
</div>

Answer 1

您错过了一个结束表单标记</form>，这里有一个使用事件委派的解决方案，不需要这些id；(

document.querySelector(".Contact-form form").addEventListener("focus", function(e) {
// check if the previous element of the clicked element is an `i` element
// then add the class active to it
if(e.target.previousElementSibling?.nodeName === "I") {
e.target.previousElementSibling.classList.add("active");
}
}, true);
document.querySelector(".Contact-form form").addEventListener("blur", function() {
// check if there is an active `i` element than remove that class
this.querySelector("i.active")?.classList.remove("active");
}, true);
function validation() {
// your validation code
}

i.active {
color: #0773b5;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="Wrapper">
<h1>Contact Us</h1>
<div class="Contact-form">
<form id="reset">
<div class="form-group" id="Name-group">
<i class="fas fa-user" id="User-icon"></i>
<input type="text" name="name" class="form-control" id="Name" autocomplete="on" placeholder="Name" required>
</div>
<div class="form-group" id="Phone-group">
<i class="fas fa-phone" id="Phone-icon"></i>
<input type="text" name="phone" class="form-control" id="Phone" autocomplete="on" placeholder="Phone" required>
</div>
<div class="form-group" id="Email-group">
<i class="fas fa-at" id="Phone-icon"></i>
<input type="email" name="email" class="form-control" id="Email" autocomplete="on" required onkeydown="validation()">
</div>
<div class="form-group" id="Message-group">
<i class="fas fa-envelope" id="Phone-icon"></i>
<textarea class="form-control" id="Message" rows="5" cols="5" name="message" required></textarea>
</div>
<div class="form-group" id="Submit-button">
<input type="submit" name="" id="btn" class="form-control btn btn-default" value="Send">
</div>
</form>
<div id="msg"></div>
</div>
</div>

Answer 2

您不应该使用click事件
例如，制表键用于从一个输入切换到另一个输入
您必须使用焦点和模糊事件

const myForm = document.getElementById('my-form')
;
myForm.querySelectorAll('input, textarea').forEach(el=>
{
el.onfocus = e => setIconFocus( e, true )
el.onblur = e => setIconFocus( e, false )
})
function setIconFocus(e, onOff )
{
let ikon = e.target.closest('#my-form div').querySelector('i.fas')
if (ikon) ikon.classList.toggle('focusColor', onOff)
}
myForm.onsubmit = e =>
{
console.clear()
e.preventDefault() // disable submit for testing here
}
myForm.Email.onkeydown = e =>
{
console.clear()
console.log('input Email = ', myForm.Email.value )
// your code of validation() 
}

body, textarea, input  {
font-family : Helvetica, Arial sans-serif;
font-size   : 16px;
}
#my-form div {
position : relative; 
padding  : .2em 0 0 1em;
}
#my-form div i.fas {
position : absolute; 
top      : 1em;
left     : .6em;
}
#my-form div i.fas.focusColor {
color : #0773b5;
}
#my-form div input,
#my-form div textarea {
display    : inline-block;
box-sizing : border-box; 
width      : 14em; 
margin     : .5em 0 .7em 1.3em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<form id="my-form">
<div>
<i class="fas fa-user"></i>
<input name="Name"  type="text" autocomplete="on" placeholder="Name" required>
</div>
<div>
<i class="fas fa-phone"></i>
<input name="Phone" type="text" autocomplete="on" placeholder="Phone" required>
</div>
<div>
<i class="fas fa-at" ></i>
<input name="Email" type="email" autocomplete="on" required >
</div>
<div>
<i class="fas fa-envelope-open-text" ></i>
<textarea name="Message"   required></textarea>
</div>
<div>
<button type="submit" >Send</button> 
</div>
</form>