Überschreiben Sie das Ausfüllen von Browserformularen und das Hervorheben von Eingaben mit HTML / CSS

139

Ich habe 2 Grundformulare - Anmelden und Anmelden, beide auf derselben Seite. Jetzt habe ich kein Problem mit dem automatischen Ausfüllen des Anmeldeformulars.~~Aber das Anmeldeformular wird auch automatisch ausgefüllt, und ich mag es nicht.~~

Außerdem erhalten die Formularstile einen gelben Hintergrund, den ich nicht überschreiben kann, und ich möchte dazu kein Inline-CSS verwenden. Was kann ich tun, damit sie nicht mehr gelb gefärbt werden?~~und (möglicherweise) automatische Befüllung~~? Danke im Voraus!

html css input autofill casraf
quelle

4

Sie stellen hier wirklich zwei Fragen: Wie deaktiviere ich das automatische Ausfüllen von Formularen? -AND- Wie überschreibe ich den gelben Hintergrund, wenn das automatische Ausfüllen des Formulars aktiviert ist? Dies war nicht klar, bis ich alle Kommentare in den Antworten unten gelesen habe. Vielleicht möchten Sie Ihre Frage bearbeiten (insbesondere, weil Sie so weit gegangen sind, ein Kopfgeld anzubieten).

Benzado

Du hast recht, bearbeitet. Oder sowieso eine faule Version davon.

Casraf

1

Als Benutzer des Formulars würde ich es hassen, wenn meine Benutzerfreundlichkeit aufgrund Ihrer visuellen Vorlieben beeinträchtigt würde, indem die automatische Vervollständigung erzwungen und hervorgehoben wird. Lassen Sie den Benutzer dies ausschalten, nicht Sie. Lass meine Browser-Erfahrung in Ruhe.

Byran Zaugg

Das ist die Sache, ich habe die automatische Vervollständigung nur im Registrierungsformular deaktiviert, das im Grunde keine reguläre automatische Vervollständigung haben sollte. Die Abschlussinformationen werden erst erstellt, wenn Sie sich angemeldet haben. Was das Anmeldeformular betrifft, möchte ich die automatische Vervollständigung beibehalten, aber nur die dumme Farbe deaktivieren, die in die Eingabefelder eingefügt wird, da der Text darin nicht mehr lesbar ist - der Hintergrund ist gelb und die Textfarbe ist weiß (der ursprüngliche Hintergrund ist dunkelgrau). .

Casraf

1

Mögliches Duplikat des automatischen Ausfüllens

zzzzBov

163

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

<form autocomplete="off">

zum Farbproblem:

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

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

1) Da # id-Stile noch wichtiger sind als .class-Stile, kann Folgendes funktionieren:

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

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

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

3) Wenn das nicht funktioniert, sind ~~Sie zum Scheitern verurteilt :-)~~ Bedenken ~~Sie Folgendes~~ : Dadurch wird die gelbe Farbe nicht ausgeblendet, aber der Text wird 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 unter Last 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 oben genannten Aufgaben ausgeführt wird, versuchen Sie, die Eingabeelemente zu entfernen, sie zu klonen und die geklonten Elemente wieder auf der Seite zu platzieren (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 aus :

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

Phil Rykoff
quelle

(1) funktioniert nicht. Ich werde es versuchen (2), wenn ich wieder zu Hause bin. hoffentlich kann JS dies überschreiben; danke :)

casraf

1

(4) entfernt definitiv Gelb: Fokusrand.

Ruruskyi

Wenn das letzte Bit für Sie nicht funktioniert und Sie wissen, wie Javascript funktioniert (haben Sie die richtigen IDs usw.). Sie könnten das Problem haben, das ich hatte. Ich verwende jquery mobile aus bestimmten Gründen und dies beginnt später und ersetzt die Eingaben es scheint. Also habe ich ein Intervall festgelegt, das es alle 50 ms klont (es hat nach 400 ms mit setTimeout funktioniert, aber ich möchte keine langsamen Verbindungen riskieren). Und nach einer Sekunde wird das Intervall entfernt:code

Mathijs Segers

var keepTheInputCloned = setInterval(function(){                          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);         },50);         setTimeout(function(){clearInterval(keepTheInputCloned)},1000);

Mathijs Segers

Ich habe ein ähnliches Problem mit Safari auf Mavericks. Aber wenn ich Methode 5 verwende, wird sie für eine Sekunde (oder drei Sekunden, wenn ich das Zeitlimit auf 3000 eingestellt habe) ausgeschaltet, und dann gewinnt der Browser und ich habe die automatische Vervollständigung aktiviert. In meinem Anwendungsfall frage ich den Benutzer nach seinem Benutzernamen / Passwort für eine andere Site, damit ich Informationen von der anderen Site abrufen kann. Daher möchte ich definitiv nicht, dass der Benutzername und das Passwort, die er für meine Site verwendet, automatisch ausgefüllt werden. Irgendwelche Gedanken dazu (außer dem Untergang des Originals # 3)?

Jack RG

218

Trick es mit einem "starken" Innenschatten:

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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Tamás Pap
quelle

10

Das ist wirklich klug. :)

Jordan Gray

3

+1000 (wenn ich könnte) Ja, ich kann mir keinen anderen Weg vorstellen, dies zu tun. Dies ist wirklich aufdringlich von Webkit ...

o_O

1

genial dies sollte die Antwort Nummer eins sein, einfach und effektiv

Pixelomo

3

Das ist großartig, weil es funktioniert und wirklich kreativ ist. Aber es erinnert mich an alte IE6-Hacks und ähnliches. Ein bisschen beschissen von Google, um uns einen: -webkit-autofill-Parameter zu geben und nicht zuzulassen, dass Designer den Standard überschreiben, oder?

Squarecandy

1

Das Bereitstellen einer Farbauswahl, die nicht angepasst werden kann, hilft weder der Benutzerfreundlichkeit noch der Zugänglichkeit. Diese Bedenken liegen bis auf diesen frustrierenden Hack in Chrome immer noch vollständig in den Händen des Entwicklers. Niemand kann die Absicht der Chrome-Entwickler bemängeln, nur die Ergebnisse.

Lunster

25

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

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

MCBL
quelle

1

Das hat bei mir funktioniert - danke! (obwohl ich Weiß in die Farbe ändern musste, die ich eigentlich wollte)

jennEDVT

2

Ganz klar die beste Antwort.

Brandon Harris

16

<form autocomplete="off">

So ziemlich alle modernen Browser werden das respektieren.

Jason Kester
quelle

7

Genial, aber es löst nur das weniger wichtige Problem; Wie kann ich die automatische Vervollständigung beibehalten, aber das Stil- Webkit ( prntscr.com/4hkh ) verlieren? o: danke aber

casraf

1

Eigentlich sollte es beides tun. Das Feld wird nur gelb, um Sie darüber zu informieren, dass Chrome / Safari / ff es automatisch mit Ihrem Passwort ausgefüllt hat. Wenn Sie sagen, dass es nicht gefüllt werden soll, hat es keine Chance, es

einzufärben

11

Ja, aber schauen Sie sich an, was ich gesagt habe: "Wie kann ich die automatische Vervollständigung beibehalten, aber den Stil des Webkits verlieren ?"

Casraf

Das einzige Problem dabei autocompleteist, dass es in HTML vor Version 5 ungültig ist.

Paul D. Waite

15

Nach 2 Stunden Suche scheint Google Chrome die gelbe Farbe immer noch irgendwie zu überschreiben, aber ich habe das Update gefunden. Es funktioniert auch für Schweben, Fokussieren usw. Alles was Sie tun müssen, ist es hinzuzufügen !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;
}

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

Don
quelle

Es funktioniert bei mir ohne 1000px, nur 0 überall, -webkit-box-shadow: 0 0 0 0 weißer Einschub! Wichtig;

Luis Lopez

3

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

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

Dmitriy Likhten
quelle

3

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

Sofern der Browser-Anbieter nicht speziell eine herstellerspezifische Methode zum Überschreiben implementiert hat, können Sie nichts gegen solche Stile unternehmen, die bereits dazu gedacht sind, das Stylesheet der Site für den Benutzer zu überschreiben. Diese werden normalerweise angewendet, nachdem Ihre Stylesheets angewendet wurden, und ignorieren auch ! importantÜberschreibungen.

Alan Plum
quelle

3

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

Ich habe versucht, es auch in das <input>Element zu setzen, und es hat besser funktioniert.

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

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

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

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

Geben Sie hier die Bildbeschreibung ein

Dies führt dazu, dass Browser nicht wissen, um welche Art von Feld es sich handelt, und daher nicht versuchen, es automatisch zu vervollständigen.

andstud.io
quelle

Was mir daran gefällt, ist, dass die meisten Leute das gesamte Formular, das beim erneuten Laden der Seite nicht ausgefüllt wird (z. B. ein langer Textbereich), nicht schätzen würden, aber es dem Entwickler ermöglichen, das Ausfüllen bestimmter Elemente (z. B. Bankkartennummer) zu verhindern. Ärgerlicherweise hört die Unterstützung für dieses Attribut auf

Luke Madhanga

1

Wenn es sich im Eingabefeld befindet, versuchen Sie, "gelb zu entfernen" ...

Stellen Sie mit CSS eine Hintergrundfarbe ein ... sagen wir #ccc (hellgrau).
Add value = "sometext", der das Feld vorübergehend mit "sometext" füllt.
(optional) Fügen Sie ein wenig Javascript hinzu, um den "Sometext" deutlich zu machen, wenn Sie den echten Text einfügen.

So könnte es aussehen:

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

weißes Pferd
quelle

1

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

Arjan
quelle

1

Ich glaube, es wird, aber wäre es nicht ein bisschen hart, dies 50 Mal pro Sekunde zu tun? Ich weiß, dass es funktionieren wird und nicht zu langsam sein wird. Scheint aber ein bisschen zu viel.

Mathijs Segers

0

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

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

Wenn das nicht funktioniert, wird wahrscheinlich nichts. Diese Felder werden hervorgehoben, um den Benutzer darauf aufmerksam zu machen, dass sie automatisch mit privaten Informationen (z. B. der Privatadresse des Benutzers) gefüllt wurden. Es könnte argumentiert werden, dass das Ausblenden einer Seite ein Sicherheitsrisiko darstellt.

Benzado
quelle

0

Das formElement verfügt über ein autocompleteAttribut, auf das Sie festlegen können off. Ab dem CSS verhindert die !importantDirektive nach einer Eigenschaft, dass sie überschrieben wird:

background-color: white !important;

Nur IE6 versteht es nicht.

Wenn ich Sie missverstanden habe, gibt es auch die outlineEigenschaft, die Sie nützlich finden könnten.

zneak
quelle

2

Chrome scheint das! Wichtige zu ignorieren, wenn es Eingabefelder

automatisch ausfüllt

@Torandi Möglicherweise liegt es an den User-Agent-Stylesheets. Einstellungen aus User-Agent-Stylesheets sollten zuletzt gelten, es sei denn, sie verfügen über die !importantDirektive. In diesem Fall hat sie Vorrang vor allen anderen. Sie sollten das Stylesheet Ihres Benutzeragenten überprüfen (obwohl ich nicht weiß, wo es zu finden ist).

Zneak

0

Ich habe gesehen, dass die Autovervollständigungsfunktion der Google-Symbolleiste mit Javascript deaktiviert wurde. Es könnte mit einigen anderen Tools zum automatischen Ausfüllen funktionieren. Ich weiß nicht, ob es bei Browsern hilft, die in Autocomplete eingebaut sind.

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

Adam
quelle

0

Nachdem ich viele Dinge ausprobiert hatte, fand ich funktionierende Lösungen, die die automatisch ausgefüllten Felder zerstörten und durch doppelte ersetzten. Um angehängte Ereignisse nicht zu verlieren, habe ich mir eine andere (etwas langwierige) Lösung ausgedacht.

Bei jedem "Eingabe" -Ereignis werden schnell "Änderungs" -Ereignisse an alle beteiligten Eingaben angehängt. Es wird geprüft, ob sie automatisch ausgefüllt wurden. Wenn ja, senden Sie ein neues Textereignis aus, das den Browser dazu verleitet, zu glauben, dass der Wert vom Benutzer geändert wurde, sodass 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);
  }
});

Ernests Karlsons
quelle

0

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

Klonen Sie die Eingabe, setzen Sie das Attribut zurück und verbergen Sie die ursprüngliche Eingabe. Für das iPad ist eine Zeitüberschreitung erforderlich

Milbe
quelle

0

Da der Browser nach Kennwortfeldern sucht, besteht eine andere Problemumgehung darin, am Anfang Ihres Formulars ein ausgeblendetes Feld einzufügen:

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

Kt Mack
quelle

0

Ich habe so viele Threads gelesen und so viele Codeteile ausprobiert. Nachdem ich all diese Dinge gesammelt hatte, war die einzige Möglichkeit, die Anmelde- und Kennwortfelder sauber zu leeren und ihren Hintergrund auf Weiß zurückzusetzen, die folgende:

$(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 einige finden.

TwystO
quelle

0

Die automatische Vervollständigung wird von modernen Browsern nicht unterstützt. Der einfachste Weg, die Autovervollständigung zu lösen, war ein kleiner Track mit HTML und JS. Als erstes müssen Sie den Typ der Eingabe in HTML von 'Passwort' in 'Text' ändern.

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

Die automatische Vervollständigung beginnt nach dem Laden des Fensters. Das ist okay. Wenn der Typ Ihres Feldes jedoch nicht "Passwort" ist, wusste der Browser nicht, welche Felder er ausfüllen muss. Es wird also keine automatische Vervollständigung für Formularfelder geben.

Binden Sie danach den Ereignisfokus in das Kennwortfeld, z. im Rückgrat:

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

In onInputPasswordFocusIn, ändern Sie einfach den Typ des Feldes mit einem Passwort, durch einfache Prüfung:

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 einige lustige Trick gefunden. Setzen Sie das schreibgeschützte Attribut auf das Eingabefeld und entfernen Sie es im Fokusereignis. Erstens verhindern Sie, dass der Browser Felder automatisch ausfüllt, zweitens können Daten eingegeben werden.

volodymyr3131
quelle

Die automatische Vervollständigung ist Teil des Standards, obwohl die Verwendung und Implementierung variieren kann. Das Ändern von Eingabetypen im IE schlägt ebenfalls spektakulär fehl, weshalb jQuery es blockiert. Im Allgemeinen ist es jedoch keine gute Idee, wenn Sie den IE developer.mozilla.org/en-US/docs/Web/Security/…

casraf

@casraf Sorry, es ist ein Teil des Standards, aber es funktioniert nicht in allen modernen Browsern, wie es sein muss, also wird es nicht das tun, wofür es erfunden wurde. In EDGE funktioniert es gut, über frühere Versionen kann nichts sagen (

volodymyr3131

Es stimmt, es ist nicht überall implementiert. Das Problem besteht immer noch - je nachdem, wie weit Sie den IE unterstützen möchten - vor Version 11. Ich glaube nicht, dass Sie den Eingabetyp ändern können. Wenn Sie sich keine Sorgen um alte Versionen machen, können Sie diese auch verwenden autocomplete=off, da sie für eine Weile in FF, Chrome und IE ab der vorherigen Version oder so

funktioniert

Ich habe versucht, autocomplete = off sowohl für Eingaben als auch für Formulare zu verwenden, und Chrome füllt immer noch Anmelde- und Anmeldeformulardaten aus. Dies ist nur eine seltsame Magie, da es basierend auf den Kommentaren in einigen Fällen funktioniert und in einige tut es nicht =)

volodymyr3131

Ich weiß, diese Standards werden nicht wirklich konsequent befolgt. Es ist eine Schande, macht unser Leben schwerer :(

Casraf

0

Bitte versuchen Sie es mit autocomplete = "none" in Ihrem Eingabe-Tag

Das funktioniert bei mir

Vayodya Tamari
quelle

0

Ich musste auch die Textfarbe auf etwas Dunkleres ändern (siehe StackOverflow dunkle Themenfarben).

So entstand eine Mischung aus @ Tamás Pap, @MCBL und @ don's Lösung:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Andrei
quelle

-3

Warum nicht einfach das in dein CSS einfügen:

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

Das sollte sich um Ihr Problem kümmern. Dies wirft zwar ein Usability-Problem auf, da der Benutzer jetzt nicht sehen kann, dass das Formular so ausgefüllt wurde, wie er es gewohnt ist.

[Bearbeiten] Nachdem ich dies gepostet hatte, sah ich, dass bereits eine ähnliche Antwort gegeben wurde und dass Sie kommentiert haben, dass es nicht funktioniert hat. Ich verstehe nicht ganz warum, weil es funktioniert hat, als ich es getestet habe.

Kris
quelle

funktioniert nicht sowohl in Chrom als auch in Safari. Stil ist input:-webkit-autofillund existiert input --webkit-autocompleteeinfach nicht

ruruskyi

@ EliseuMonar: Ich bin mir ziemlich sicher, dass ich nicht gelogen habe, kann mich aber nicht an Details erinnern, wie oder wo ich es getestet habe. Der Code selbst wurde wahrscheinlich aus dem Speicher eingegeben, nicht kopiert / eingefügt, also automatisch vervollständigen oder automatisch ausfüllen? Ich weiß nicht.

Kris

-3

Das WIRKLICHE Problem hierbei ist, dass das Webkit (Safari, Chrome, ...) einen Fehler aufweist. Wenn mehr als ein [Formular] auf der Seite vorhanden ist, jedes mit einem [Eingabetyp = "Text" name = "foo" ...] (dh mit demselben Wert für das Attribut 'Name'), kehrt der Benutzer zurück Auf der Seite erfolgt das automatische Ausfüllen im Eingabefeld des ERSTEN [Formulars] auf der Seite, nicht im [Formular], das gesendet wurde. Beim zweiten Mal wird das NÄCHSTE [Formular] automatisch ausgefüllt und so weiter. Nur [Formular] mit einem Eingabetextfeld mit dem gleichen Namen ist betroffen.

Dies sollte den Webkit-Entwicklern gemeldet werden.

Opera füllt das rechte [Formular] automatisch aus.

Firefox und IE werden nicht automatisch ausgefüllt.

Also sage ich noch einmal: Dies ist ein Fehler im Webkit.

Per Lindberg
quelle

Überschreiben Sie das Ausfüllen von Browserformularen und das Hervorheben von Eingaben mit HTML / CSS

Antworten: