代码之家 › 专栏 › 技术社区 › casraf

用HTML/CSS替代浏览器表单填充和输入突出显示

autofill input css html

117

casraf · 技术社区 · 14 年前

我有两个基本表单——登录和注册,都在同一页上。现在,我对签到表的自动填写没有问题, ~~但是报名表也会自动填写,我不喜欢。~~

另外,表单样式有一个黄色的背景,我无法覆盖它,我不想使用内联CSS来覆盖它。我该怎么做才能让它们不再是黄色的呢 ~~和(可能)自动填充~~ ?事先谢谢!

20 回复 | 直到 6 年前

135

Mr_Green 9 年前

对于自动完成功能,可以使用:

<form autocomplete="off">

关于着色问题:

从您的屏幕截图中,我可以看到WebKit生成以下样式:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1)由于ID样式比类样式更重要,下面是可以工作:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2)如果不起作用,您可以尝试通过编程方式通过javascript设置样式。

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3)如果这样不行, ~~你命中注定了——)~~ 考虑一下: 这不会隐藏黄色,但会使文本再次可读。

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4)CSS/javascript解决方案:

CSS:

input:focus {
    background-position: 0 0;
}

以下javascript必须以onload方式运行:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

如:

<body onload="loadPage();">

祝你好运:-

5)如果以上工作都没有,请尝试删除输入元素,克隆它们,然后将克隆的元素放回页面(在Safari 6.0.3上工作):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6)从 here 以下内容:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

164

Tamás Pap 12 年前

用“强烈”的阴影来戏弄它:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

MCBL 11 年前

添加这个CSS规则,黄色背景色将消失。:)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Jason Kester 14 年前

<form autocomplete="off">

几乎所有的现代浏览器都会尊重这一点。

rav_kr luk32 8 年前

经过两个小时的搜索,谷歌的Chrome似乎仍然以某种方式覆盖了黄色,但我找到了解决方法。它也适用于悬停、聚焦等。你所要做的就是增加 !important 对它。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

这将完全删除输入字段中的黄色。

Dmitriy Likhten 14 年前

您还可以将表单元素的name属性更改为生成的内容,这样浏览器就不会跟踪它。然而,如果请求的URL相同,那么火狐2.x+和谷歌Chrome似乎没有什么问题。尝试为注册表单添加salt请求参数和salt字段名。

不过,我认为autocomplete=“off”仍然是最好的解决方案:)

Alan Plum 14 年前

从HTML5开始,您可以禁用自动完成(通过 autocomplete="off" ,但不能覆盖浏览器的突出显示。你可以试着玩弄 ::selection 在CSS中(大多数浏览器都需要一个厂商前缀才能工作),但这也可能对您没有帮助。

除非浏览器供应商专门实现了供应商特定的覆盖方式,否则您不能对已经打算覆盖用户站点样式表的样式做任何操作。这些通常在应用样式表并忽略之后应用 ! important 也会重演。

andstud.io 10 年前

有时,当您只在 表单中输入代码时,浏览器上的自动完成功能仍会自动完成。

我试着将它放入 <input> 元素中,效果更好。

<form autocomplete=“off”>和<input autocomplete=“off”>
< /代码> 

但是,对该属性的支持正在停止,请阅读
https://bugzilla.mozilla.org/show_bug.cgi?ID=956906 C1

https://bugzilla.mozilla.org/show_bug.cgi?内径=956906



我发现的另一个解决方法是在输入字段中去掉占位符,建议输入字段是电子邮件、用户名或电话字段(即“your email”、“email”等)。



这使得浏览器不知道它是哪种字段,因此不会尝试自动完成它。

中的代码<form>元素。

我试着把它放进<input>元素也一样,而且效果更好。

<form autocomplete="off">  AND  <input autocomplete="off">


但是,对该属性的支持正在停止,请阅读
https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906



我发现的另一个解决方法是在输入字段中去掉占位符,建议输入字段是电子邮件、用户名或电话字段(即“your email”、“email”等)。



这使得浏览器不知道它是哪种字段,因此不会尝试自动完成它。

Arjan 12 年前

这解决了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);
}

whitehorse 14 年前

如果它在输入字段中,您试图“取消黄色”…

用CSS设置背景色…假设CCC(浅灰色)。
add value=“sometext”,临时用“sometext”填充字段
(可选)添加一点javascript,使“sometext”在放入真实文本时清晰可见。

所以,它看起来像这样:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

benzado 14 年前

您链接到的屏幕截图显示WebKit正在使用选择器 input:-webkit-autofill 对于这些元素。你试过把这个放到你的CSS中吗?

input:-webkit-autofill {
    background-color: white !important;
}

如果这不起作用,那就没什么可能了。这些字段被突出显示,以提醒用户它们已经自动填充了私人信息(例如用户的家庭地址),可以说允许隐藏页面会带来安全风险。

zneak 14 年前

这个 form 元素具有 autocomplete 可以设置为的属性 off . 从CSS开始 !important 属性后的指令使其不被重写:

background-color: white !important;

只有IE6不明白。

如果我误解了你,还有 outline 您会发现有用的属性。

Adam 14 年前

我看到Google工具栏的自动完成功能被javascript禁用了。它可能与其他一些自动填充工具一起工作;我不知道它是否对内置自动完成功能的浏览器有帮助。

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Ernests Karlsons 12 年前

在尝试了很多东西之后,我发现了一些有效的解决方案,这些解决方案可以修饰自动填充的字段,并用复制字段替换它们。为了不破坏附加事件,我提出了另一个(有点冗长的)解决方案。

在每个“输入”事件中,它迅速地将“更改”事件附加到所有相关的输入。它测试它们是否已经自动填充。如果是,则发送一个新的文本事件,它将欺骗浏览器认为该值已被用户更改,从而允许删除黄色背景。

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Mite 10 年前

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

克隆输入、重置属性并隐藏原始输入。 iPad需要超时

Kt Mack 10 年前

由于浏览器搜索密码类型字段,另一个解决方法是在表单开头包含隐藏字段:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

TwystO 8 年前

我读了这么多线程,尝试了这么多代码。在收集了所有这些资料之后,我发现清理掉登录和密码字段并将其背景重置为白色的唯一方法是:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

请随意评论,如果您找到一些增强功能,我将对所有增强功能开放。

volodymyr3131 6 年前

现代浏览器不支持自动完成功能关闭。解决自动完成问题的最简单方法是跟踪HTML和JS。首先要做的是将HTML输入的类型从“密码”更改为“文本”。

<input class="input input-xxl input-watery" type="text" name="password"/>

自动完成功能在加载窗口后启动。没关系。但当您的字段类型不是“密码”时,浏览器不知道必须填写哪些字段。因此,表单字段上不会有自动完成功能。

之后,将事件focusin绑定到密码字段,例如主干网中:

'focusin input[name=password]': 'onInputPasswordFocusIn',

在 onInputPasswordFocusIn ,只需通过简单检查将字段类型更改为密码即可:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

就是这样!

upd:这件事不适用于禁用的javasprit

UPD在2018。还发现了一些有趣的把戏。将readonly属性设置为输入字段,并在Focus事件中移除它。首先阻止浏览器自动填充字段,然后允许输入数据。

-2

Per Lindberg 13 年前

真正的问题是WebKit(Safari,Chrome,…)有一个bug。当页面上有多个[表单]时,每个表单都有一个[input type=“text”name=“foo”…](即属性“name”的值相同),那么当用户返回页面时,自动填充将在页面上第一个[表单]的输入字段中完成,而不是在发送的[表单]中完成。第二次,下一个[表单]将自动填充,依此类推。只有具有相同名称的输入文本字段的[表单]才会受到影响。

这应该报告给WebKit开发人员。

Opera自动填充右[窗体]。

Firefox和IE不自动填充。

所以,我再说一遍:这是WebKit中的一个bug。

-3

Kris 14 年前

为什么不把它放在你的CSS中:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

这应该解决你的问题。尽管这确实会引起可用性问题,因为现在用户看不到表单是按照他/她习惯的方式自动填充的。

[编辑]发布后,我发现已经给出了类似的答案。和你对它的评论说它不起作用。我不太明白为什么,因为我测试的时候它确实起作用了。