Javascript 将JS函数和事件侦听器应用于多个html元素

我正在创建一个表单，我在下面对其进行了简化，以直截了当地说，JS代码用于控制占位符；隐藏在焦点上并在模糊上重新出现，显然这现在只适用于id为（'Name'）的输入。如何将这些函数应用于所有输入元素，而不重复每个输入的代码

var x=document.getElementById（“名称”）；
x、 addEventListener（“focusin”，myFocusFunction）；
x、 addEventListener（“focusout”，myBlurFunction）；
函数myFocusFunction（）{
document.getElementById（'Name'）。占位符=''；
}
函数myfullfunction（）{
document.getElementById（'Name'）。占位符='Name'；
}

Array.from（document.getElementsByTagName（“输入”））.forEach（输入=>{
input.addEventListener（“focusin”，focus）；
addEventListener（“focusout”，blur.bind（input，input.placeholder））；
});
函数焦点（）{
this.placeholder=''；
}
函数模糊（占位符）{
this.placeholder=占位符；
}

---

您可以给元素一个类，然后进行迭代

document.querySelectorAll（'.placeholder'）.forEach（函数（el）{
el.addEventListener（“focusin”，myFocusFunction）；
el.addEventListener（“focusout”，myBlurFunction）；
});
函数myFocusFunction（）{
document.getElementById（'Name'）。占位符=''；
}
函数myfullfunction（）{
document.getElementById（'Name'）。占位符='Name'；
}

---

您可以为需要此功能的输入设置公共类，例如“添加提示”，然后：

var x = document.querySelectorAll(".add-tip");
for (var i=0;i< x.length;i++) {
    x[i].addEventListener("focusin", myFocusFunction);
    x[i].addEventListener("focusout", myBlurFunction);
}
function myFocusFunction(e) {
    e.target.setAttribute('placeholder','');  
}

function myBlurFunction(e) {
    e.target.setAttribute('placeholder','Name');  
}

var x=document.querySelectorAll（“.addtip”）；
对于（变量i=0；i

尝试这样做

函数myFocusFunction（事件）{
var元素=event.target.getAttribute（'id'）；
document.getElementById（element）.placeholder=''；
}
函数myBlurFunction（事件，占位符）{
var元素=event.target.getAttribute（'id'）；
document.getElementById（element）.placeholder=占位符；
}

为什么？浏览器正在为您做这件事。当我开始键入not onfocus或onclick时，它确实隐藏了占位符。谢谢。我使用了您的原始答案，并通过使用

obj.getAttribute（'id'）

保留了占位符。