Erkennung der automatischen Vervollständigung bei der Formulareingabe mit jQuery

Lesezeit: 4 Minuten

Ich habe ein Formular, das erkennt, ob alle Textfelder bei jedem keyup() und focus() gültig sind; Wenn sie alle gültig sind, wird der Submit-Button aktiviert, den der Benutzer drücken kann. Wenn der Benutzer jedoch eine der Texteingaben mit einer Browser-Autovervollständigungsfunktion ausfüllt, verhindert dies, dass die Senden-Schaltfläche aktiviert wird.

Gibt es eine Möglichkeit, mit jQuery zu erkennen, ob sich eine der Eingaben geändert hat, unabhängig davon, wie sie geändert wurde?

  • Hier ist eine Lösung für dieses Problem => this

    – Mourad El Aomari

    19. April 2016 um 19:16 Uhr

  • schau dir meine antwort hier an

    – Lew Kasakow

    8. Januar 2017 um 6:37 Uhr

Benutzer-Avatar
Cheshireoctopus

Du könntest versuchen, es zu verwenden on input um textbasierte Änderungen zu erkennen (außer Tasten wie ctrl und shift) in <input>‘s.

Zum Beispiel:

$(input).on('input', function() { 
    console.log($(this).val()); 
});

  • Die Eingabe funktioniert in IE11 nicht, wenn die Anmeldeinformationen bereits vom Browser beim Laden der Seite ausgefüllt werden.

    – Vinzenz Sels

    21. November 2016 um 8:07 Uhr


Das jQuery-Änderungsereignis wird nur bei Unschärfe ausgelöst. Das keyup-Ereignis wird während der Eingabe ausgelöst. Kein Feuer beim Klicken auf eine Option zur automatischen Vervollständigung. Ich suche auch nach einer Möglichkeit, dies zu erkennen, aber ich gehe derzeit mit

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

Aber das löst das Problem nicht ganz…

  • Das musste ich leider ablehnen! Damit habe ich zu 90% gute Erfahrungen gemacht change keyup aber keyup hängt nicht an autofill in chrome-cases und change an Autofill anhängen nur wenn der Fokus verloren geht! Chrome behielt manchmal den Textcursor nach dem Autofill im Eingabefeld und löste das Änderungsereignis nicht aus! Vielleicht ein reines Chrome-Problem …

    – Grimm

    17. Juli 2016 um 10:35 Uhr


  • @PeterRader: Ja, ich dachte, ich hätte das in der Antwort deutlich gemacht.

    – Spycho

    8. August 2016 um 13:07 Uhr

  • @Spycho Wenn Sie ein 3. Feld danach haben username und password dann change ist angesagt username und password jedes Mal! Dies ist eine Problemumgehung, die 100 % erreicht.

    – Grimm

    8. August 2016 um 18:23 Uhr

  • @PeterRader: Ausgezeichnet. Poste das als Antwort?

    – Spycho

    8. August 2016 um 22:13 Uhr

Ich selbst habe verwendet

$(selector).on("change keyup blur input", function() {});

was in Chrome den Trick gemacht hat. input ist, was es für die automatische Vervollständigung funktioniert hat.

  • Funktioniert nicht zuverlässig in Chrome. Wenn ich die Seite schnell doppelt aktualisiere, werden die Autocomplete-Werte nicht erfasst.

    – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

    28. März 2017 um 10:23 Uhr

Benutzer-Avatar
Justin

Mein Problem war das Erkennen des automatischen Ausfüllens (über ein Plugin wie lastpass oder 1password) sowie das oben beschriebene Problem.

Die Lösung, die für mich funktionierte, war:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

Siehe Demo in JSFiddle.

Benutzer-Avatar
Peter Aytai

Sie könnten die jQuery verwenden .change() Funktion.

Nachdem die Seite zum ersten Mal geladen wurde, können Sie das gesamte Formular validieren, nur um zu überprüfen, ob es tatsächlich nicht ausgefüllt ist. Danach können Sie verwenden .change() um zu überprüfen, ob sich etwas am Formular geändert hat, und falls sich etwas geändert hat, validieren Sie das Formular erneut.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

Plan B

Eine andere Möglichkeit besteht darin, den Senden-Button immer anklickbar zu haben, aber zu verwenden .submit() um es an den Formularvalidator zu binden. Wenn das Formular gültig ist, fahren Sie fort. Wenn das Formular NICHT gültig ist, verwenden Sie es .preventDefault() um die Übermittlung des Formulars zu stoppen … und Sie würden auch eine Warnmeldung anzeigen, die auf die fehlenden Felder hinweist.

Benutzer-Avatar
Gemeinschaft

Die Antwort wurde in dieser Frage gegeben. Es verwendet kein jQuery, aber es funktioniert für Autocomplete:

Verwenden Sie js onpropertychange Veranstaltung.

Benutzer-Avatar
James Wilson

Ich habe eine anständige Lösung, nachdem ich das gleiche Problem hatte. Setzen Sie keyup wie gewohnt auf unsere Formularfelder und bewegen Sie die Maus dann auf das umgebende div. Sobald Sie also auf die Option zur automatischen Vervollständigung klicken, befindet sich Ihre Maus über dem Div:

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

  • Viele Benutzer verwenden keine Maus – sie bewegen entweder die Tabulatortaste, um Felder zu fokussieren, oder tippen darauf.

    – Ziege

    18. Juni 2017 um 18:57 Uhr

1225840cookie-checkErkennung der automatischen Vervollständigung bei der Formulareingabe mit jQuery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy