0

Mootools OverText (* http://mootools.net/docs/more/Forms/OverText、http://mootools.net/demos/?demo=Enhancedで「プレースホルダー」を追加したログインフォームに取り組んでいます-フォーム)。

問題は、ブラウザが電子メール/パスワードでフィールドをオートコンプリートし、それらが OverText の下に表示されることです。フィールドがブラウザによって入力されたときにオーバーテキストを表示しないようにする方法はありますか? (※オートコンプリートはONにしておきたい)

*ブラウザがフィールドをオートコンプリートしている場合、メール/パスワードの上に 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>
4

1 に答える 1

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>

編集：（自動入力を検出するのが難しい
ため 、別の代替手段）

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);
于 2013-08-31T12:36:42.450 に答える