Überschreiben Sie das Ausfüllen von Browserformularen und die Eingabehervorhebung mit HTML/CSS
https://stackoverflow.com/questions/2338102
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe zwei Grundformulare: Anmelden und Registrieren, 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 das gefällt mir nicht.
Außerdem erhalten die Formularstile einen gelben Hintergrund, den ich nicht überschreiben kann, und ich möchte dafür kein Inline-CSS verwenden.Was kann ich tun, damit sie nicht mehr gelb gefärbt sind? und (möglicherweise) automatisches Befüllen?Dank im Voraus!
Lösung
Ihre Möglichkeiten würden von der Art der Lösung abhängen, die Sie vorhaben, um eingerichtet zu sein - No-Code / Code-basiert (das ist kompilierter Code, z. B. über den Webparts) oder in der Mitte (z. B. JavaScript-ECMA in einem CEWP) . Jedes dieser Angebote unterscheidet sich von Alternativen, grundsätzlich: 1. Code-basiert - der offensichtlichste - benutzerdefinierte Web-Teilen-Aufzählen basierend auf der Vorlagen-ID der Besprechungsarbeitsbereiche (unter einem Auszug aus dem tatsächlichen WebTemp * .xml, wo SharePoint 2010 alle Vorlagen speichert - Sie müssen es inzwischen wissen, dass es mehrere Arten von MPS gibt gibt. 0, MPS # 1 usw.) generasacodicetagpre.
Die 2. Option würde den dedizierten SOAP-Webdienst wie hier beschrieben http://msdn.microsoft.com/de//msdn.microsoft.com/en-us/library/ff764949 (v= office.12) .aspx - nicht der nicht empfehlungsvollste Weg, insbesondere vorwärts 2013. .
Die 3. Alternative mit dem Client-Side-Objektmodell, das Sie tatsächlich dem gleichen Konzept verfolgen würden, verfolgen Sie das gleiche Konzept wie bei der 1. Option über JavaScript - Differenz, dass Sie nicht kompilieren / bereitstellen, weder Farm Admin als Bereitstellung von Farm-Administrator bereitstellen Zugriff auf alle Eigenschaften eines SPWEB http://www.stefan-walter.net/show-edit-web-properties-javaScript-klient-seite-Object-model/
Andere Tipps
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;
}
Fügen Sie diese CSS -Regel hinzu, und die gelbe Hintergrundfarbe wird verschwinden. :)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
<form autocomplete="off">
So ziemlich alle modernen Browser werden das respektieren.
Nach zwei Stunden Suche scheint Google Chrome immer noch irgendwie die gelbe Farbe zu überschreiben, aber ich habe die Lösung gefunden.Es funktioniert beim Schweben, Fokussieren usw.sowie.Alles, was Sie tun müssen, ist hinzuzufügen !important dazu.
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
Sie können auch das Namensattribut Ihrer Formularelemente so ändern, dass er generiert ist, damit der Browser es nicht im Auge behält. Firefox 2.x+ und Google Chrome scheint jedoch nicht viele Probleme damit zu haben, wenn die Anforderungs -URL identisch ist. Fügen Sie im Grunde einen Salzanforderungsparam und einen Salzfeldnamen für das Anmeldeformular hinzu.
Ich denke jedoch, dass autocomplete = "off" immer noch Top -Lösung ist :)
Sie können die automatische Vervollständigung ab HTML5 (via "deaktivieren autocomplete="off"), aber Sie können das Hervorheben des Browsers nicht überschreiben. Sie könnten versuchen, sich miteinander auszulegen ::selection In CSS (die meisten Browser benötigen ein Anbieter -Präfix, damit dies funktioniert), aber das wird Ihnen wahrscheinlich auch nicht helfen.
Sofern der Browser-Anbieter nicht speziell eine Lieferantenspezifische Methode zur Übersteuerung implementiert hat, können Sie nichts gegen solche Stile unternehmen, die bereits das Stylesheet der Website für den Benutzer außer Kraft setzen sollen. Diese werden normalerweise angewendet, nachdem Ihre Stylesheets angewendet und ignoriert wurden ! important Auch überschreibt.
Manchmal automatisch im Browser automatisch vervollständigt, wenn Sie nur den Code im Code haben <form> Element.
Ich habe versucht, es in die zu setzen <input> Element auch und es hat besser funktioniert.
<form autocomplete="off"> AND <input autocomplete="off">
Die Unterstützung für dieses Attribut ist jedoch eingestellt, bitte lesen Siehttps://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Eine weitere Arbeit, die ich gefunden habe, besteht darin, Platzhalter innerhalb der Eingabefelder zu entfernen, die darauf hindeuten, dass es sich um eine E -Mail, ein Benutzername oder ein Telefonfeld handelt (dh "Ihre E -Mail", "E -Mail" usw. ").
Dies macht es so, dass Browser nicht wissen, welche Art von Feld es ist, und versucht daher nicht, es automatisch zu vervollständigen.
Dies behebt das Problem sowohl auf Safari als auch auf Chrom
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);
}
Diese Zonen und ihre Etiketten sind nur Etiketten. Es gibt empfehlen, dass Sie mehrere Authentifizierungsmethoden in der Standardzone umsetzen, was den Zugriff einfacher für den Benutzer macht, da nur eine URL verwendet wird.
Um die Verbindung zwischen internen URL, Zonen und öffentlichen URL zu verstehen, wird der Artikel ein Leitfaden für alternative Access-Mappings-Grundlagen in SharePoint 2013 ist sehr nützlich. Der Artikel beschreibt die Zone auf diese Weise:
Zone ist ein Etikett, das eine öffentliche URL darstellt, die Zone wird verwendet, um eine interne URL an eine öffentliche URL "verbinden". Die Zonennamen haben keine Beziehung, was mit den vier Internet-Explorer-Sicherheitszonen (Internet, lokales Intranet, vertrauenswürdige Sites und eingeschränkte Sites) so ist und genauso leicht als 1,2,3,4 und 5 genannt worden sein könnte.
Der Screenshot, mit dem Sie verlinkt sind, sagt, dass Webkit den Selektor verwendet input:-webkit-autofill für diese Elemente. Haben Sie versucht, dies in Ihr CSS zu stecken?
input:-webkit-autofill {
background-color: white !important;
}
Wenn das nicht funktioniert, wird es wahrscheinlich nichts. Diese Felder werden hervorgehoben, um den Benutzer darüber aufmerksam zu machen, dass er mit privaten Informationen (z. B. der Heimatadresse des Benutzers) automatisiert wurde, und es könnte argumentiert werden, dass eine Seite zu ermöglichen, ein Sicherheitsrisiko zuzulassen.
Das form Element hat an autocomplete Attribut, auf das Sie einstellen können off. Zum CSS die !important Die Richtlinie nach einer Immobilie verhindert, dass es außer Kraft gesetzt wird:
background-color: white !important;
Nur IE6 versteht es nicht.
Wenn ich dich missverstanden habe, gibt es auch die outline Eigenschaft, die Sie nützlich finden könnten.
CSS-Klassen und Attribute des Radeditors und des SharePoint-HTML-Editors unterscheiden sich für den Div, der bearbeitet werden kann. Ich denke, durch Entfernen von SharePoint-Kursen und Attributen aus dieser DIV können Sie RADESTITOR und RUITE VERSA aufbewahren. Versuchen Sie dieses jQuery-Plugin zum Entfernen von SharePoint-Editor von einer div: generasacodicetagpre.
Dann können Sie auf einer Wiki-Seite diesen Code aufnehmen: generasacodicetagpre.
Infolgedessen sind die Tasten des Bandes immer noch da, aber sie werden deaktiviert. Und der SharePoint-Editor erkennt den DIV nicht als editierbar.
update:
Sie können eine JS-Datei "wikijs.js" mit dem Code erstellen: generasacodicetagpre.
Setzen Sie diese Datei dann in "Stilbibliothek".
dann müssen Sie auf der Masterseite den ScriptLink-Steuerelement aufnehmen: generasacodicetagpre.
Ich mag diese Lösung nicht wirklich sehr, da er SharePoint-Editor auf allen Wiki-Seiten deaktiviert wird. Deshalb möchten Sie vielleicht das JavaScript ändern, um sich spezifischer für die Seiten zu speziellen, mit denen Sie temperieren möchten.
Wir könnten auch versuchen, den Radeditor auszublenden, anstatt SharePoint-Editor zu deaktivieren: generasacodicetagpre.
Nachdem ich viele Dinge ausprobiert hatte, fand ich funktionierende Lösungen, die die automatisierten Felder nukierten und sie durch dupliziert ersetzten. Um nicht angeschlossene Ereignisse zu verlieren, habe ich eine weitere (etwas langwierige) Lösung entwickelt.
Bei jedem "Input" -Event fügt es schnell "Änderungsveränderungen" an alle beteiligten Eingänge an. Es wird getestet, wenn sie automatisch verfolgt wurden. Wenn ja, dann entsenden Sie ein neues Textereignis, mit dem der Browser der Ansicht ist, dass der Wert vom Benutzer geändert wurde und so den gelben Hintergrund entfernen 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);
}
});
Einfache JavaScript -Lösung für den gesamten Browser:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
Kloneingang, Attribut zurücksetzen und die ursprüngliche Eingabe ausblenden. Timeout ist für das iPad benötigt
Da der Browser nach Feldern vom Typ Kennwort Typ sucht, besteht eine andere Problemumgehung darin, zu Beginn Ihres Formulars ein verstecktes Feld aufzunehmen:
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
Neustart der SQL-Dienste auf den Servern (WFES & DB), gelöst diesen Fehler.
Autocomplete Off wird nicht von modernen Browsern unterstützt. Der einfachste Weg, um automatische Vervollständigung zu lösen, war eine kleine Spur mit HTML und JS. Das erste, was Sie tun müssen, ist, den Typ der Eingabe in HTML von 'Passwort' in 'Text' zu ändern.
<input class="input input-xxl input-watery" type="text" name="password"/>
Autokaponete beginnt nach dem Laden des Fensters. Das ist okay. Aber wenn der Typ Ihres Feldes nicht "Passwort" ist, wusste Browser nicht, welche Felder er abschließen muss. Es gibt also keine automatische Vervollständigung auf Formularfeldern.
Bind Event Focusin Focusin an Passwortfeld für Ex. im Rückgrat:
'focusin input[name=password]': 'onInputPasswordFocusIn',
Im onInputPasswordFocusIn, Ändern Sie einfach den Typ Ihres Feldes auf Passwort, indem Sie einfache Überprüfung:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
Das ist es!
UPD: Dieses Ding funktioniert nicht mit behinderten Javasciprt
Upd im Jahr 2018. Auch einige lustige Tricks gefunden. Setzen Sie das Readonly -Attribut auf das Eingabefeld und entfernen Sie es im Fokusereignis. Verhindern Sie zunächst, dass Browser Felder automatisieren, und zweitens können Sie Daten eingeben.
Warum nicht einfach das in Ihr CSS einfügen:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
Das sollte sich um Ihr Problem kümmern. Obwohl es ein Usability -Problem aufwirft, weil der Benutzer jetzt nicht erkennen kann, dass das Formular in der Art und Weise, wie er/sie gewohnt ist, automatisch aufgebaut wurde.
Bearbeiten] Nachdem ich dies gepostet habe, sah ich, dass eine ähnliche Antwort bereits gegeben wurde und Dass Sie es kommentiert haben, dass es nicht funktioniert hat. Ich verstehe nicht ganz, warum es funktioniert hat, als ich es getestet habe.
Das eigentliche Problem hier ist, dass Webkit (Safari, Chrome, ...) einen Fehler hat. Wenn auf der Seite mehr als ein Formular vorhanden ist, jeweils mit einem [Eingabe type = "text" name = "foo" ...] (dh mit dem gleichen Wert für das Attribut -Name 'Name'), dann, wenn der Benutzer zurückgibt Auf der Seite wird das Autofill im Eingabefeld des ersten [Formulars] auf der Seite, nicht im [Formular], das gesendet wurde, erfolgen. Das zweite Mal wird die nächste [Form] automatisch und so weiter. Es wird nur [Form] mit einem Eingabtextfeld mit demselben Namen betroffen.
Dies sollte den Webkit -Entwicklern gemeldet werden.
Opera automatisiert die richtige [Form].
Firefox und IE automatisieren nicht.
Also, ich sage noch einmal: Dies ist ein Fehler in Webkit.
