Функция автозаполнения в браузерах не вызывает событий JS

Question

<form>
<input type="text" id="username" value="Username">
<div style="position:relative">
<span style="position:absolute;top:0;" id="passwordTxt">Password</span>
<input style="position:absolute;top:0;visibility:visible;" 
type="password" id="password" value="">
</div>
</form>

var obj=document.getElementById("password")
obj.addEventListener( "change", change(0) , false );
obj.addEventListener( "input", change(0) , false );
obj.addEventListener( "focus", change(0) , false );
obj.addEventListener( "blur", change(1) , false );

function change(action){
return function (){ 
var txt = document.getElementById("passwordTxt")
var pass= document.getElementById("password")
if(action){
if(pass.value =="")
txt.style.visibility="visible";
}
else txt.style.visibility="hidden";
}
}

Наличие type="password" позволит браузеру запрашивать функцию remember password. Если имя пользователя уже существует, всплывающее окно с кэшированным именем пользователя и, если оно существует password - оно заполняется браузером - очень удобно. но эта функция не запускает никаких событий JS! Я хочу, чтобы span был скрыт, если в это поле введен пароль или любое другое значение, но функция браузера позволяет всплыть небольшой ошибке.

Любая помощь приветствуется. (Я не работаю с jQuery, поэтому мне поможет простой обходной путь / решение JS)

Answer 1

Полагаю, вы хотите затмить текстовое поле с заголовком «Пароль», если оно пустое.Простое решение, о котором я мог бы подумать, - это подключиться к загрузке страницы и посмотреть, доступен ли текст.

Лучшим подходом является использование существующих и протестированных сред.Вы можете найти то, что вы ищете в Bootstrap.Перейдите http://twitter.github.com/bootstrap/base-css.html#forms и посмотрите пример встроенных форм