Verschieben eines Fokus, wenn das input-text-Feld erreicht eine max Länge

Ich habe eine Kreditkartennummer form. Die Zahl gliedert sich in vier Teile, wie auf einer echten Kreditkarte.

Möchte ich hinzufügen, dass eine JavaScript-Geschmack, an der form, wo, wenn Sie eine Benutzer-Typen-vier Buchstaben in einem Feld, der Fokus geht automatisch auf den nächsten tag. Aber nicht in den letzten tag. Indem wir dies tun, wird ein Benutzer nicht haben, um geben Sie die "tab" - Taste bewegen Sie sich im Fokus.

Es okay ist, fügen Sie einige zusätzliche Klassen -, id-oder name in den tags.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>MoveFocus</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(function() {
     //some code goes here.
    });
    </script>
</head>


<body>
  <form action="post.php" method="post" accept-charset="utf-8">
    <input type="text" value="" id="first" size="4" maxlength="4"/> -
    <input type="text" value="" id="second" size="4" maxlength="4"/> -
    <input type="text" value="" id="third" size="4" maxlength="4"/> -
    <input type="text" value="" id="fourth" size="4" maxlength="4"/>
    <p><input type="submit" value="Send Credit Card"></p>
  </form>
</body>
</html>

InformationsquelleAutor der Frage TK. | 2009-12-24

Habe ich nicht verwendet dieses tool vor, aber es tut, was Sie wollen. Sie könnten einfach look at it ' s Quelle, einige Ideen zu bekommen:

Dieses Plugin ist auf GitHub

Für Ihre situation, Sie fügen diesen code ein:

<script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#first').autotab({ target: '#second', format: 'numeric' });
    $('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' });
    $('#third').autotab({ previous: '#second', format: 'numeric' });
});
</script>

InformationsquelleAutor der Antwort Tauren

15

Als andere haben aufgefordert, dies nicht tun. Benutzer sind nicht in der Lage sein, zu antizipieren, dass Sie auto-Registerkarte, und dies treibt Sie Nüsse. Haben Sie sich Gedanken über Benutzer, die Kopie und fügen Sie Ihre Kredit-Karte? Was ist der Vorteil der Verwendung von vier-Felder überhaupt?

Auch nicht alle Kreditkarten teilen sich Ihre zahlen in vier Sätzen von vier. American Express teilt Sie in drei Gruppen von zahlen, zum Beispiel. Dynamisch hinzufügen und entfernen von Textfeldern ist der ärger in diesem Fall.

Stattdessen verwenden Sie Ihre Javascript automatisch einfügen der Räumewo Sie hingehören, die Förderung der cursor nicht im Mittelpunkt. Die erste Ziffer der Nummer zeigt die Art der Kreditkarte, (5 Mastercard, 4 Visa, 3 American Express...), so dass Sie dies Lesen können, um zu entscheiden, wo, um die Räume. Schrubben Sie die Leerzeichen aus der Zeichenfolge, wenn Sie es veröffentlichen. Dieser Ansatz spart Ihnen und Ihren Nutzern eine Menge Schmerz.

InformationsquelleAutor der Antwort Michael Zuschlag
9

Als @Sander vorgeschlagen, die auf einfache Weise eine auto-Registerkarte:
```
jQuery("form input[type=text]").on('input',function () {
    if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
        jQuery(this).next("input").focus();
    }
});
```
Update von @morespace54

oninput ist ein html5 Veranstaltung wird unterstützt auf IE9+so können Sie keyup statt.

InformationsquelleAutor der Antwort Ouadie
6

Ich empfehle sehr, die Maskierte Eingabe jQuery-plugin. http://digitalbush.com/projects/masked-input-plugin/

Ihre Nutzung wird wie folgt Aussehen:
```
$('#creditCardNumber').mask("9999-9999-9999-9999");
```
Diese Weise haben Sie die copy-paste-Unterstützung.

InformationsquelleAutor der Antwort Doguhan Uluca

Eine sehr einfache Lösung könnte so gehen:

<script type="text/javascript">
    function input_onchange(me){ 
        if (me.value.length != me.maxlength){
            return;
        }
        var i;
        var elements = me.form.elements;
        for (i=0, numElements=elements.length; i<numElements; i++) {
            if (elements[i]==me){
                break;
            }
        }
        elements[i+1].focus();
    }
</script>
<form action="post.php" method="post" accept-charset="utf-8">
    <input type="text" value="" id="first" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <input type="text" value="" id="second" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <input type="text" value="" id="third" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <input type="text" value="" id="fourth" size="4" maxlength="4"
        onchange="input_onchange(this)"
    /> -
    <p><input type="submit" value="Send Credit Card"></p>
</form>

InformationsquelleAutor der Antwort Roland Bouman

0

Ich habe es noch nicht getestet, aber ich denke, dass dies funktionieren wird. Es wird wohl auch den Fokus auf den Knopf, wenn das 4. Feld ist abgeschlossen.
```
$("form input").change(function () {
    var maxLength = $(this).attr('maxlength');

    if($(this).val().length == maxLength) {
        $(this).next().focus();
    }
}
```
InformationsquelleAutor der Antwort Sander Rijken

Diese nicht über vier Felder, aber es funktioniert überprüfen Kreditkarten (Integrität überprüfen, nicht Luhn-Algorithmus!). Ich muss Ihnen sagen,wie ärgerlich es ist die Verwendung mehrerer Felder für einen Benutzer und auto-tabbing. Ich empfehle Ihnen, verwenden Sie nur ein Feld.

Vom jquery-website:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>

<form id="myform">
  <label for="field">Required, creditcard (try 446-667-651): </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

InformationsquelleAutor der Antwort

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.