Wie deaktiviert man die automatische Vervollständigung für Formularfelder in Browsern?

Leon A. -

Problem: Unerwünschte Autovervollständigung in Formularfeldern

Die Autovervollständigung in Webbrowsern kann Formularfelder mit Informationen ausfüllen, die Sie zuvor eingegeben haben. Diese Funktion kann nützlich sein, kann aber auch zu Problemen mit dem Datenschutz führen oder die Funktionsweise einiger Formulare beeinträchtigen.

Lösungen zum Deaktivieren der Autovervollständigung

HTML-Attribut-Methode

Die einfachste Methode, die Autovervollständigung zu deaktivieren, ist die Verwendung des Attributs autocomplete="off" in Ihren HTML-Formularfeldern. Sie können dieses Attribut einzelnen Eingabeelementen oder dem gesamten Formular hinzufügen:

<input type="text" name="username" autocomplete="off">

oder

<form autocomplete="off">
    <!-- Formularfelder hier -->
</form>

Es gibt jedoch Probleme mit der Browser-Kompatibilität. Einige Browser, wie Firefox, ignorieren dieses Attribut für Passwortfelder aus Sicherheitsgründen. Sie fragen Benutzer möglicherweise trotzdem, ob sie Passwörter speichern möchten.

Tipp: Verwenden Sie spezifische Autovervollständigungswerte

Für eine bessere Kontrolle verwenden Sie spezifische Autovervollständigungswerte anstatt nur "off". Zum Beispiel kann autocomplete="new-password" für Passwortfelder verhindern, dass Browser sie mit bestehenden gespeicherten Passwörtern automatisch ausfüllen.

JavaScript-Techniken

Wenn HTML-Attribute nicht funktionieren, bietet JavaScript andere Lösungen:

  1. Formularfelder beim Laden der Seite leeren:
window.onload = function() {
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].reset();
    }
}
  1. Browser daran hindern, Formulardaten zu speichern:
document.forms['myForm'].setAttribute('autocomplete', 'off');
  1. Benutzerdefinierte JavaScript-Lösungen:

Sie können eine Funktion erstellen, um Formularfelder nach dem Absenden zu leeren:

function clearForm() {
    document.getElementById('myForm').reset();
}

Diese JavaScript-Methoden geben Ihnen mehr Kontrolle über das Autovervollständigungsverhalten, können aber mehr Wartung und Tests auf verschiedenen Browsern und Geräten erfordern.