wake-up-neo.net

Überschreiben Sie das Ausfüllen von Browsern und die Hervorhebung von Eingaben mit HTML/CSS

Ich habe 2 Grundformen - melden Sie sich an und melden Sie sich an, beide auf derselben Seite. Jetzt habe ich kein Problem mit dem Anmeldeformular, das automatisch ausgefüllt wird. aber auch das Anmeldeformular füllt sich automatisch und ich mag es nicht.

Außerdem erhalten die Formularstile einen gelben Hintergrund, den ich nicht überschreiben kann, und dazu möchte ich kein Inline-CSS verwenden. Was kann ich tun, um sie nicht mehr gelb zu färben? und (möglicherweise) automatisches Füllen? Danke im Voraus!

117
casraf

für die automatische Vervollständigung können Sie Folgendes verwenden:

<form autocomplete="off">

bezüglich des Farbproblems:

in Ihrem Screenshot kann ich sehen, dass das Webkit den folgenden Stil generiert:

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

1) Da # id-styles noch wichtiger sind als .class-Styles, funktionieren die folgenden may -Objekte:

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

2) Wenn dies nicht funktioniert, können Sie versuchen, den Stil per Javascript programmgesteuert festzulegen 

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

3) wenn das nicht funktioniert, du bist zum Scheitern verurteilt :-) Beachten Sie Folgendes: Die gelbe Farbe wird nicht ausgeblendet, der Text wird jedoch wieder lesbar.

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

4) eine CSS/Javascript-Lösung:

css:

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

und das folgende Javascript muss beim Laden ausgeführt werden:

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)
    }
}

z.B:

<body onload="loadPage();">

viel Glück :-)

5) Wenn keine der obigen Arbeiten ausgeführt wird, entfernen Sie die Eingabeelemente, klonen Sie sie und platzieren Sie die geklonten Elemente dann wieder auf der Seite (funktioniert in 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) Von hier :

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);
        });
    });
}
134
Phil Rykoff

Trick es mit einem "starken" inneren Schatten:

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;
} 
163
Tamás Pap

Fügen Sie diese CSS-Regel hinzu und die gelbe Hintergrundfarbe verschwindet. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
22
MCBL
<form autocomplete="off">

So ziemlich alle modernen Browser werden das respektieren.

14
Jason Kester

Nach zwei Stunden der Suche scheint Google Chrome die gelbe Farbe immer noch zu überschreiben, aber ich habe die Lösung gefunden. Es wird auch für Schwebeflug, Fokus usw. funktionieren. Alles was Sie tun müssen, ist, !important hinzuzufügen.

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;
}

dadurch wird die gelbe Farbe vollständig aus den Eingabefeldern entfernt

12
don

Sie können auch das Namensattribut Ihrer Formularelemente ändern, sodass es vom Browser nicht erfasst wird. Firefox 2.x + und Google Chrome scheint jedoch keine großen Probleme damit zu haben, wenn die Anforderungs-URL identisch ist. Versuchen Sie grundsätzlich, einen Salt-Request-Parameter und einen Salt-Feldnamen für das Anmeldeformular hinzuzufügen.

Ich denke jedoch, dass autocomplete = "off" immer noch die beste Lösung ist :)

3
Dmitriy Likhten

Manchmal wird die automatische Vervollständigung im Browser immer noch automatisch vervollständigt, wenn Sie nur den Code im <form>-Element haben.

Ich habe es auch in das <input>-Element eingefügt und es hat besser funktioniert.

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

Die Unterstützung für dieses Attribut wird jedoch eingestellt. Lesen Sie hierzu bitte https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

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


Eine andere Arbeit, die ich gefunden habe, ist das Entfernen von Platzhaltern in den Eingabefeldern, aus denen hervorgeht, dass es sich um eine E-Mail, einen Benutzernamen oder ein Telefonfeld handelt (z. B. "Ihre E-Mail", "E-Mail" usw.)

enter image description here

Dies macht es so, dass Browser nicht wissen, um was für ein Feld es sich handelt, und versuchen daher nicht, es automatisch zu vervollständigen.

3
andstud.io

Sie können die automatische Vervollständigung ab HTML5 deaktivieren (über autocomplete="off"), aber Sie können die Hervorhebung des Browsers NICHT überschreiben. Sie könnten versuchen, ::selection in CSS durcheinander zu bringen (die meisten Browser benötigen ein Herstellerpräfix, damit dies funktioniert), aber das wird Ihnen wahrscheinlich auch nicht helfen.

Wenn der Browseranbieter nicht ausdrücklich eine herstellerspezifische Methode zum Überschreiben implementiert hat, können Sie nichts gegen solche Stile unternehmen, die das Stylesheet der Website für den Benutzer bereits überschreiben sollen. Diese werden normalerweise angewendet, nachdem Ihre Stylesheets angewendet wurden, und ignorieren auch ! important-Überschreibungen.

3
Alan Plum

Dies behebt das Problem sowohl bei Safari als auch bei 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);
}
2
Arjan

Wenn es sich um ein Eingabefeld handelt, versuchen Sie, die gelbe Farbe aufzuheben ...

  1. Legen Sie eine Hintergrundfarbe mit css fest ... sagen wir #ccc (hellgrau).
  2. Add value = "sometext", der das Feld temporär mit "sometext" füllt
  3. (optional) Fügen Sie ein kleines Javascript hinzu, um den "Sometext" deutlich zu machen, wenn Sie den eigentlichen Text eingeben.

So könnte es so aussehen:

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

Einfache Javascript-Lösung für alle Browser:

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

Eingabe klonen, Attribut zurücksetzen und ursprüngliche Eingabe ausblenden . Für das iPad ist ein Timeout erforderlich

0
Mite

Da der Browser nach Kennworttypfeldern sucht, ist eine weitere Problemumgehung, ein ausgeblendetes Feld am Anfang Ihres Formulars einzufügen:

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

Autocomplete off wird von modernen Browsern nicht unterstützt. Der einfachste Weg, die Autovervollständigung zu lösen, die ich gefunden habe, war ein kleiner Track mit HTML und JS . Als Erstes müssen Sie den Typ der Eingabe in HTML von 'password' in 'text' ändern.

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

Die Autovervollständigung startet nach dem Laden des Fensters. Kein Problem. Wenn der Typ Ihres Felds jedoch nicht "Kennwort" ist, wusste der Browser nicht, welche Felder er ausfüllen muss. Es wird also keine automatische Vervollständigung von Formularfeldern geben.

Binden Sie anschließend den Ereignisfokus in das Kennwortfeld, z. im Backbone:

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

Ändern Sie in onInputPasswordFocusIn einfach den Typ Ihres Feldes in Kennwort, indem Sie einfach überprüfen:

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

Das ist es 

UPD: Dieses Ding funktioniert nicht mit deaktiviertem JavaSciprt

UPD im Jahr 2018. Auch ein paar lustige Tricks gefunden. Legen Sie das Readonly-Attribut für das Eingabefeld fest und entfernen Sie es für das Fokusereignis. Erstens verhindern Sie, dass der Browser die Felder automatisch ausfüllt, und zweitens können Sie Daten eingeben.

0
volodymyr3131

Nachdem ich viele Dinge ausprobiert hatte, fand ich funktionierende Lösungen, mit denen die automatisch ausgefüllten Felder abgefragt und durch Duplikate ersetzt wurden. Um anhängende Ereignisse nicht zu verlieren, habe ich eine andere (etwas langwierige) Lösung gefunden.

Bei jedem "input" -Ereignis werden an alle beteiligten Eingänge schnell "change" -Ereignisse angehängt. Es wird geprüft, ob sie automatisch gefüllt wurden. Wenn ja, lösen Sie ein neues Textereignis aus, bei dem der Browser den Eindruck erweckt, dass der Wert vom Benutzer geändert wurde, wodurch der gelbe Hintergrund entfernt werden kann.

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

Der von Ihnen verlinkte Screenshot zeigt an, dass WebKit für diese Elemente den Selektor input:-webkit-autofill verwendet. Haben Sie versucht, dies in Ihr CSS einzufügen?

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

Wenn das nicht funktioniert, wird wahrscheinlich nichts passieren. Diese Felder werden hervorgehoben, um den Benutzer darauf hinzuweisen, dass er automatisch mit privaten Informationen gefüllt wurde (z. B. die Privatadresse des Benutzers). Es könnte argumentiert werden, dass eine Seite ausgeblendet werden kann, die ein Sicherheitsrisiko darstellt.

0
benzado

Das form-Element hat ein autocomplete-Attribut, das Sie auf off setzen können. Ab CSS verhindert die !important-Direktive nach einer Eigenschaft, dass sie überschrieben wird:

background-color: white !important;

Nur IE6 versteht es nicht.

Wenn ich Sie falsch verstanden habe, gibt es auch die outline -Eigenschaft, die Sie als nützlich erachten könnten.

0
zneak

Ich habe gesehen, dass die automatische Vervollständigung der Google Toolbar mit Javascript deaktiviert ist. Es funktioniert möglicherweise mit einigen anderen Autofill-Tools. Ich weiß nicht, ob es bei in Autocomplete eingebauten Browsern helfen wird.

<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>
0
Adam

Ich habe so viele Threads gelesen und so viele Code-Teile ausprobiert ... Nachdem ich all das gesammelt hatte, war die einzige Möglichkeit, die Login- und Passwort-Felder sauber zu leeren und ihren Hintergrund auf Weiß zurückzusetzen:

$(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);
});

Fühlen Sie sich frei zu kommentieren, ich bin offen für alle Verbesserungen, wenn Sie welche finden.

0
TwystO