Javascript onFocus在页面加载时触发

Question

这里是代码

我遇到了一个问题。

我有一个简单的表单：

<form method="post" action="login.php">

<input type="text" name="Username" value="Username" />
<input type="password" name="Password" value="Password" />
<input type="submit" name="submit" value="Log in" />

</form>

以下是脚本内容：

function focus(element) {

    console.log('focused ' + element.getAttribute('name'));

    var elementValue = element.value;
    var elementName = element.getAttribute('name');
    elementValue = (elementValue == elementName ? '' : elementValue);

}


var fields = ['Username', 'Password'];

for (var i = 0; i < fields.length; i++) {

    console.log(i + ': ' + fields[i]);

    var input = document.getElementsByName(fields[i])[0];

    console.log('input value: ' + input.value);

    input.onFocus = focus(input);

}

这段代码应该为每个输入框创建一个“焦点”事件监听器，并在用户单击任何字段时调用“focus()”函数。但由于某种原因，控制台显示它仅为每个字段循环一次调用函数，然后停止响应未来的“焦点”事件。

所以我猜测这行代码input.onFocus = focus(input);有问题，但我不知道是什么。我错过了什么？

- Ivan Chepurin

---

input.addEventListener('focus', focus, false); 并在函数中使用 this。 - adeneo

Answer 1

在下一行代码中，您立即调用了focus函数并传递了返回值（该返回值为undefined）。您还需要使用onfocus而不是onFocus，因为属性名区分大小写。该代码内容与编程有关。

input.onFocus = focus(input);

相反，你可以这样使用.bind():

input.onfocus = focus.bind(null, input);

这将设置具有集参数的函数，而不实际调用它。

已更新的fiddle

- MrCode

---

好的，谢谢。我需要学习一下bind()方法，因为我还不太理解它的机制。 - Ivan Chepurin

没问题，很高兴能帮到你。点击我提供的.bind()链接，MDN文档解释得非常好，但基本上它允许你分配一个函数，该函数具有其上下文和参数列表预配置，而不实际调用它。 - MrCode

好的，现在我明白了。花了一分钟。 - Ivan Chepurin

Answer 2

因为你将 focus 函数的 返回值（即 undefined）分配为 onFocus 事件的处理程序，而不是将函数本身作为处理程序。

请尝试以下方法：

input.onfocus = focus.bind(input, input);

或者

input.onfocus = function() { focus(input);

另外，您需要将onFocus更改为onfocus。

请参见MDN。

- haim770