Javascript onFocus page load triggers

Question

Fiddle

So, I have this problem.

I have a simple form:

<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>

And this script:

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);

}

It is supposed to create Focus event listeners for each input and call the focus () function when the user clicks on any of the fields. But for some reason, as the console shows, it simply calls the function after the loop for each of the fields and simply stops responding to future Focus events .

So, I think that input.onFocus = focus(input);something is wrong with this line , but I do not know what. What am I missing?

Answer 1

focus ( undefined). onfocus not onfocus, .

input.onFocus = focus(input);

.bind() :

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

, .

​​

Answer 2

focus onFocus ( undefined).

:

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

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

, onFocus onFocus.

. MDN