Javascript Mootools超文本和电子邮件/密码自动完成
我正在制作一个登录表单,在表单上添加了带有Mootools超文本的“占位符” (*,) 问题是浏览器正在使用电子邮件/密码自动完成字段,并显示在超文本下。 当浏览器填充字段时,是否有任何方法可以使超文本不显示?(*我想保持自动完成功能) *当浏览器自动完成字段时,超文本将显示在电子邮件/密码上: **超文本字段的正常视图:Javascript Mootools超文本和电子邮件/密码自动完成,javascript,mootools,autofill,Javascript,Mootools,Autofill,我正在制作一个登录表单,在表单上添加了带有Mootools超文本的“占位符” (*,) 问题是浏览器正在使用电子邮件/密码自动完成字段,并显示在超文本下。 当浏览器填充字段时,是否有任何方法可以使超文本不显示?(*我想保持自动完成功能) *当浏览器自动完成字段时,超文本将显示在电子邮件/密码上: **超文本字段的正常视图: <form id="user_form_login" action="/login"> <div id="email-wrapper" class
<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>
试试这个:
<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>
我不知道如何使用CSS实现这一点,但请看一下上面的屏幕截图。我无法在小提琴中模拟浏览器自动完成。不起作用,但可能很接近。我不认为这个自动填充可以通过'change'@Bogh检测到,是浏览器自动填充吗?是的,在这里我是reffering,浏览器自动填充/autocomplete@Bogh,检查我答案中的另一个选项。谢谢,我会看看我能用这个做些什么:)
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);