[javascript] Automatische Vervollständigung bei Formulareingabe mit jQuery erkennen



3 Answers

Sie könnten versuchen, eine on input zu verwenden, um textbasierte Änderungen (außer Schlüssel wie ctrl und shift ) in <input> zu erkennen.

Beispielsweise:

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

Ich habe ein Formular, das erkennt, ob alle Textfelder auf jedem keyup () und focus () gültig sind; Wenn sie alle gültig sind, wird die Übermittlungsschaltfläche für den Benutzer aktiviert. Wenn der Benutzer jedoch eine der Texteingaben mit einer Funktion zur automatischen Vervollständigung von Browsern ausfüllt, wird verhindert, dass die Übermittlungsschaltfläche aktiviert wird.

Gibt es eine Möglichkeit, mit jQuery festzustellen, ob sich die Eingabe geändert hat, unabhängig davon, wie sie geändert wurde?




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

Um dies für die normale Eingabe zu tun, war ich in der Lage, mit einer debounce zu keyup zu debounce , während blur zur sofortigen Validierung verbunden ist. Während es so aussieht, als keyup durch Lastpass ausgelöst wird, gab es eine Verzögerung bei der Validierung, da ich es entprellt habe. Dank @ peter-ajtai habe ich versucht, das change hinzuzufügen change und es fängt tatsächlich den letzten Durchlauf ein und lässt die anderen Feinheiten allein.

Coffeescript-Beispiel:

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

Dies hat gut funktioniert, und die Ausführung des Formulars "lastpass" löst die sofortige Validierung aus.




Mein Problem war das Erkennen von Auto-Fill (ü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 .




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

Nachdem die Seite geladen wurde, können Sie das gesamte Formular validieren, nur um zu überprüfen, dass es tatsächlich nicht ausgefüllt ist. Danach können Sie mit .change() prüfen, ob sich die Dinge im Formular geändert haben und ob sich etwas geändert hat. validiere 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 ist, dass der .submit() Button immer anklickbar ist, aber verwenden Sie .submit() , um ihn an den .submit() zu binden. Wenn das Formular gültig ist, dann mach weiter. Wenn das Formular NICHT gültig ist, verwenden Sie .preventDefault() , um die .preventDefault() des Formulars zu stoppen ..... und Sie würden auch eine Warnmeldung anzeigen, die die fehlenden Felder anzeigt.






Related