Javascript OnFocus триггеры на странице загрузки

Question

Fiddle

Так что я с этой проблемой.

У меня есть простой вид:

<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); что-то не так, но я не знаю что. Что мне не хватает?

Answer 1

В строке ниже вы немедленно вызываете функцию focus и передаете возвращаемое значение (которое равно 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