it-swarm.com.de

Erkennung der automatischen Vervollständigung bei der Formulareingabe mit jQuery

Ich habe ein Formular, das erkennt, ob alle Textfelder bei jedem Keyup () und Fokus () gültig sind. Wenn alle gültig sind, kann der Benutzer die Schaltfläche zum Senden drücken. Wenn der Benutzer jedoch eine der Texteingaben mit einer Funktion zur automatischen Vervollständigung des Browsers eingibt, wird die Schaltfläche "Senden" nicht aktiviert.

Gibt es eine Möglichkeit, mithilfe von jQuery zu ermitteln, ob sich eine der Eingaben unabhängig von ihrer Änderung geändert hat?

30
Ryan

Das jQuery-Änderungsereignis wird nur bei Unschärfe ausgelöst. Das Keyup-Ereignis wird bei der Eingabe ausgelöst. Weder beim Anklicken einer Option zur automatischen Vervollständigung wird Feuer ausgelöst. Ich suche auch nach einer Möglichkeit, dies zu erkennen, aber ich gehe mit

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

Aber es löst das Problem nicht ganz ...

15
Spycho

Sie könnten versuchen, on input zu verwenden, um textbasierte Änderungen (mit Ausnahme von Schlüsseln wie ctrl und shift) in <input> zu ermitteln.

Zum Beispiel:

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

Ich selbst habe ich benutzt

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

was hat den Trick in Chrome. input hat dazu geführt, dass es für Autocomplete funktioniert.

12
avoliva

Mein Problem war das Erkennen von Auto-Fill (über ein Plugin wie Lastpass oder 1Kennwort) 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 .

2
Justin

Ich habe eine anständige Lösung, nachdem ich das gleiche Problem habe. Legen Sie die Keyup-Einstellungen für unsere Formularfelder als normal fest und bewegen Sie dann das umgebende div mit der Maus. Sobald Sie auf die Autovervollständigung geklickt haben, befindet sich die Maus über dem Div:

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

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

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

Nach dem ersten Laden der Seite können Sie das gesamte Formular überprüfen, um zu überprüfen, ob es tatsächlich nicht ausgefüllt ist. Anschließend können Sie mit .change() überprüfen, ob sich Änderungen am Formular und ob sich etwas geändert hat , bestätigen 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 Option besteht darin, die Schaltfläche zum Senden immer anklickbar zu machen, aber mit .submit() an den Formular-Validator zu binden. Wenn das Formular IS gültig ist, fahren Sie fort. Wenn das Formular IS NICHT gültig ist, verwenden Sie .preventDefault() , um die Übermittlung des Formulars zu beenden ..... und Sie würden auch eine Warnmeldung anzeigen, die die fehlenden Felder angibt.

0
Peter Ajtai

Die Antwort wurde in this question gegeben. Es verwendet nicht jQuery, aber es funktioniert für Autocomplete:

Verwenden Sie das Ereignis js onpropertychange.

0
Yehuda Shapira

Ich wollte eine sehr gute Benutzererfahrung in einem Feld, in dem es nicht ungültig wäre (in meinem Fall rot), solange der Benutzer einigermaßen aktiv war, z. immer noch das Feld ausfüllen.

Um dies für die normale Eingabe zu tun, konnte ich keyup mit einer debounce-Funktion verbinden, während blur zur sofortigen Validierung angeschlossen ist. Während es scheint, dass keyup durch Lastpass ausgelöst wird, gab es seit der Entprellung eine Verzögerung bei der Überprüfung. Dank @ peter-ajtai habe ich versucht, das change -Ereignis hinzuzufügen, und es fängt tatsächlich den letzten Durchlauf an und lässt die anderen Feinheiten allein.

Kaffeescript-Beispiel:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

Dies funktionierte gut und das Ausfüllen des Lastpass-Formulars löst sofort eine Bestätigung aus.

0
kross