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 事件侦听器，并在用户点击任何输入时调用 focus() 函数田野。但出于某种原因，如控制台所示，它只是为每个字段循环调用一次函数，并且只是停止不响应未来的 Focus 事件。

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

Answer 1

在下面的行中，您将立即调用 focus 函数并传递 return 值（即 undefined）。您还需要使用 onfocus 而不是 onFocus，因为属性名称区分大小写。

input.onFocus = focus(input);

相反，您可以像这样使用 .bind()：

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

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

Updated fiddle

Answer 2

因为您没有将 focus 函数分配为 onFocus 事件的处理程序，而是分配了它的 返回值（即 undefined）。

试试这个：

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

或

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

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

见MDN

Javascript onFocus 在页面加载时触发

Javascript onFocus triggers on page load

javascript

onfocus