Javascript 声明后调用JS函数

我被要求编写一些代码，使输入的占位符在onfocus时消失，在onblur时再次返回

当我以这种方式编写代码时，它正在工作：

myInput.onfocus=函数{code here}-myInput.onblur=函数{code here}。 但是当我试图先定义这两个函数，然后调用它们时，它不起作用

像这样：

函数CLRx{ 严格使用； //存储占位符的值 x、 setAttributebkplaceholder，x.getAttributeplaceholder； //删除占位符的值 x、 setAttributeplaceholder； } 函数添加占位符{ 严格使用； //从备份中获取占位符的值 y、 setAttributeplaceholder，y.getAttributebkplaceholder； //删除backupplaceholder的值 y、 setAttributebkplaceholder； } our2Input.onfocus=CLR2input； our2Input.onblur=add占位符our2Input；

---

为什么第一种方法有效而第二种方法无效？

这里您正在调用/执行您定义的函数。当函数中没有使用return语句时，这两个函数返回未定义的函数默认返回值

所以基本上是这样做的：

input.onfocus = undefined

这是行不通的。实际上，您要做的是将引用传递给您的函数，以便稍后当输入模糊时，它将调用您的函数。 传递函数引用时，只需给出函数名而不使用括号，在使用括号时执行/调用它

input.onfocus = myFunctionName

这是您问题的答案，但实际上您不必使用javascript，因为当您键入占位符时，这是浏览器上的默认行为

只需在输入html标记上使用属性占位符，如下所示：

<input type='text' placeholder="my placeholder text" />

---

使用脂肪箭头功能

our2Input.onfocus={=>CLR占位符our2Input} our2Input.onblur={=>AddPlaceholder our2Input}

---

使用事件目标的addEventListener方法：

our2Input.addEventListener('focus', clrplaceholder);
our2Input.addEventListener('blur', addplaceholder);

function clrplaceholder(event) {
    "use strict";
    const x = event.currentTarget;
    // storing the value of the placeholder
    x.setAttribute("bkplaceholder", x.getAttribute("placeholder"));

    // removing the value of the placeholder
    x.setAttribute("placeholder", "");
}

function addplaceholder(event) {
    "use strict";
    const y = event.currentTarget;
    // get the value of the placeholder from our backup
    y.setAttribute("placeholder", y.getAttribute("bkplaceholder"));

    // removing the value of the backupplaceholder
    y.setAttribute("bkplaceholder", "");
}

您需要修改事件处理程序以实际处理事件目标：

our2Input.addEventListener('focus', clrplaceholder);
our2Input.addEventListener('blur', addplaceholder);

function clrplaceholder(event) {
    "use strict";
    const x = event.currentTarget;
    // storing the value of the placeholder
    x.setAttribute("bkplaceholder", x.getAttribute("placeholder"));

    // removing the value of the placeholder
    x.setAttribute("placeholder", "");
}

function addplaceholder(event) {
    "use strict";
    const y = event.currentTarget;
    // get the value of the placeholder from our backup
    y.setAttribute("placeholder", y.getAttribute("bkplaceholder"));

    // removing the value of the backupplaceholder
    y.setAttribute("bkplaceholder", "");
}

---

为什么必须使用javascript？只要同意@T–n。HTML输入的占位符属性与您在不使用任何额外javascript的情况下试图实现的功能完全相同。@T–n。。不，它不起作用。。我想你误解了什么。。我的意思是，当输入为infocus状态时，占位符就会消失。当你开始像浏览器默认那样写的时候就不行了。。明白你的意思了@MohammedKhaled！谢谢你的评论！这里演示了默认占位符行为和@MohammedKhaled需要实现的功能之间的区别：为什么是胖箭头函数而不是常规匿名函数？最重要的是，为什么需要使用其中一个？一个没有解释的答案并没有真正的帮助。thaks对于你正确的答案，它实际上工作得很好，但是你的意思是最好的方法是使用addEventListener吗。。是的，绑定事件实际上是这样做的。其优点见相应的MDN文章：