Mootools OverText 和电子邮件/密码自动完成

Posted 2023-02-24

【中文标题】Mootools OverText 和电子邮件/密码自动完成

【英文标题】：Mootools OverText and Email/Password Autocomplete

【发布时间】：2013-08-31 10:57:56

【问题描述】：

我正在使用 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>

【问题讨论】：

我不知道如何使用 CSS 来完成此操作，但请查看上面的屏幕截图。我无法在小提琴中模拟浏览器自动完成。

【参考方案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);

【讨论】：

不起作用，但可能很接近。我认为“更改”无法检测到此自动填充

@Bogh，是浏览器自动填充吗？

是的，我在这里引用，浏览器自动填充/自动完成

@Bogh，请检查我的答案中的另一种选择。

谢谢，我会看看我能用这个做什么:)