Override browser form-filling and input highlighti

2019-01-03 01:36发布

站内问答 / HTML/CSS
1273 20 4

I have 2 basic forms -- sign in and sign up, both on the same page. Now, I have no problem with the sign in form auto-filling, but the sign up form auto fills as well, and I don't like it.

Also, the form styles get a yellow background which I can't manage to override and I don't want to use inline CSS to do so. What can I do to make them stop being colored yellow and (possibly) auto filling? Thanks in advance!

20条回答
你好瞎i
2楼-- · 2019-01-03 02:01

Simple javascript solution for all browser:

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

Clone input, reset attribute and hide original input. Timeout is needed for iPad

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
3楼-- · 2019-01-03 02:03

for the autocompletion, you can use:

<form autocomplete="off">

regarding the coloring-problem:

from your screenshot i can see that webkit generates the following style:

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

1) as #id-styles are even more important than .class styles, the following may work:

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

2) if that won't work, you can try to set the style via javascript programmatically 

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

3) if that won't work, you're doomed :-) consider this: this wont hide the yellow color, but will make the text readable again.

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

4) a css/javascript solution:

css:

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

and the following javascript has to be run 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)
    }
}

eg:

<body onload="loadPage();">

good luck :-)

5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on 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) From 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);
        });
    });
}
查看更多
0人赞 添加讨论(0) 举报
狗以群分
4楼-- · 2019-01-03 02:04

You can disable auto-completion as of HTML5 (via autocomplete="off"), but you CAN'T override the browser's highlighting. You could try messing with ::selection in CSS (most browsers require a vendor prefix for that to work), but that probably won't help you either.

Unless the browser vendor specifically implemented a vendor-specific way of overriding it, you can't do anything about such styles that are already intended to override the site's stylesheet for the user. These are usually applied after your stylesheets are applied and ignore ! important overrides, too.

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
5楼-- · 2019-01-03 02:04

If it's in input field you're trying to "un-yellow" ...

  1. Set a background-color with css... let's say #ccc (light gray).
  2. Add value="sometext", which temporary fills the field with "sometext"
  3. (optional) Add a little javascript to make the "sometext" clear when you go to put the real text in.

So, it might look like this:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
6楼-- · 2019-01-03 02:04

After trying a lot of things, I found working solutions that nuked the autofilled fields and replaced them with duplicated. Not to loose attached events, i came up with another (a bit lengthy) solution.

At each "input" event it swiftly attaches "change" events to all involved inputs. It tests if they have been autofilled. If yes, then dispatch a new text event that will trick the browser to think that the value has been changed by the user, thus allowing to remove the yellow background.

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);
  }
});
查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
7楼-- · 2019-01-03 02:08

Since the browser searches for password type fields, another workaround is to include a hidden field at the beginning of your form:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)