Mootools OverText和電子郵件/密碼自動完成

Question

我正在使用Mootools OverText添加「佔位符」的登錄表單上工作 （* http://mootools.net/docs/more/Forms/OverText,http://mootools.net/demos/?demo=Enhanced-Form）。

問題是瀏覽器使用電子郵件/密碼自動填充字段，它們顯示在OverText下。 有沒有什麼辦法可以使字段被瀏覽器填充時不顯示超文本？ （*我想保持自動完成）

*當瀏覽器自動填充領域的OverText是顯示在電子郵件/密碼：字段與

**普通視圖OverText：

<form id="user_form_login" action="/login"> 
    <div id="email-wrapper" class="form-wrapper"> 
     <div id="email-element" class="form-element"> 
     <input type="email" name="email" id="email" value="" tabindex="1" class="text" autocomplete="off" title="<?php echo $this->translate('Email Address'); ?>"> 
     </div> 
    </div> 

    <div id="password-wrapper" class="form-wrapper"> 
     <div id="password-element" class="form-element"> 
     <input type="password" name="password" id="password" value="" tabindex="2" title="<?php echo $this->translate('Password'); ?>"> 
     </div> 
    </div> 
</form> 

<script type="text/javascript"> 
window.addEvent('domready', function(){ 
    var LoginForm = $('user_form_login'); 
    LoginForm.getElements('[type=email], [type=password]').each(function(el){ 
    new OverText(el); 
    }); 
}); 
</script> 

Answer 1

試試這個：

<script type="text/javascript"> 
window.addEvent('domready', function(){ 
    var LoginForm = $('user_form_login'); 
    LoginForm.getElements('[type=email], [type=password]').each(function(el){ 
    new OverText(el); 
    }); 
    // *** New part *** 
    LoginForm.getElements('[type=email], [type=password]').addEvent('change', function() { 
     this.getNext('label').set('text', ''); 
    }); 
}); 
</script> 

編輯：
（另一種選擇，因爲它的difficult檢測自動填充）

var All_El = LoginForm.getElements('[type=email], [type=password]'); 
var re_check = setInterval(function() { 
    All_El.each(function (el) { 
     if (el.value != '') { 
      el.getNext('label').set('text', ''); 
     } 
    }); 
}, 400);