我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
当前回答
这修复了Safari和Chrome上的问题
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}
其他回答
那解决方案呢:
if ($.browser.webkit) {
$(function() {
var inputs = $('input:not(.auto-complete-on)');
inputs.attr('autocomplete', 'off');
setTimeout(function() {
inputs.attr('autocomplete', 'on');
}, 100);
});
}
它会关闭自动完成和自动填充(因此黄色背景消失),等待100毫秒,然后在没有自动填充的情况下将自动完成功能恢复。
如果你有需要自动填充的输入,那么给它们一个自动完成的css类。
我用这个,
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
添加autocomplete="off"并不能解决问题。
将输入类型属性更改为type="search"。 谷歌不会对输入的搜索类型应用自动填充。
希望这能为您节省一些时间。
有点俗气,但对我来说很合适
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
我修复了这个问题的密码字段,我有这样:
将输入类型设置为文本而不是密码
使用jQuery删除输入文本值
使用jQuery将输入类型转换为密码
<input type="text" class="remove-autofill">
$('.js-remove-autofill').val('');
$('.js-remove-autofill').attr('type', 'password');