Bindestrich nach jedem 4. Zeichen in der Eingabe einfügen

Question

Ich möchte nach jedem 4. Zeichen in der Eingabe einen Bindestrich einfügen. Ich habe ein Eingabefeld für eine Kreditkarte. Wenn ein Benutzer tippt und jedes 4. Zeichen erreicht, dann wird jQuery einen Bindestrich einfügen ( - ).

Zum Beispiel: 1234-5678-1234-1231

UPDATE: Ich versuche einige Codes und ich denke, ich bin so nah an den richtigen Code, aber ich habe einige Probleme. Hier ist mein Code-Beispiel;

$('.creditCardText').keyup(function() {

var cardValue = $('.creditCardText').val(),
    cardLength = cardValue.length;

if ( cardLength < 5 ) {
    if ( cardLength % 4 == 0 ) {
        console.log('4 lük geldi');
        cardValue += "-";
        $('.creditCardText').val(cardValue);
    }
} else {
    if ( cardLength % 5 == 0 ) {
        console.log('5 lük geldi');
        cardValue += "-";
        $('.creditCardText').val(cardValue);

    }
}

});

Answer 1

Ich liebe dieses Plugin für die automatische Formatierung: ici .

Solange Sie bereits JQuery verwenden, versteht sich.

Sie können die Bindestriche ganz einfach mit einer einzigen Codezeile einfügen, etwa wie folgt:

$("#credit").mask("9999-9999-9999-9999");

Wenn der Benutzer das Feld eingibt, erscheinen die Bindestriche automatisch an der richtigen Stelle und können nicht gelöscht werden.

Außerdem können Sie unterschiedliche Längen oder Formate von Kreditkarten mit dem ? Zeichen in deiner Maske. Um zum Beispiel Eingaben mit 14 und 16 Ziffern zu akzeptieren, würden Sie wie folgt vorgehen:

$("#credit").mask("9999-9999-9999-99?99");

Beachten Sie, dass dies nur eine clientseitige Validierung ist.

---

bearbeiten : Das Masken-Plugin geht davon aus, dass es ein oder endlich viele richtige Formate für das Feld gibt. Zum Beispiel gibt es nur wenige Formate für Kreditkartennummern. Das Plugin soll sicherstellen, dass Ihre Eingabe nur in einem dieser Formate sein.

Wenn Sie also technisch gesehen einen Bindestrich nach allen vier Ziffern wollen, aber für cualquier Anzahl von Ziffern, dann ist dieses Plugin nicht für Sie geeignet.

Ich würde vorschlagen, die möglichen Eingaben auf ein vernünftiges Maß zu beschränken, da es sicherlich keine 1000-stellige Kreditkarte gibt. Aber wenn Sie diese Funktionalität wirklich wollen, müssen Sie das Skript selbst schreiben oder ein anderes Plugin finden. Bislang ist mir keins bekannt.

Answer 2

Ich habe Ihren Code korrigiert, empfehle aber dennoch dringend eine Server-Validierung et vier Textfelder zu verwenden und geschickt zwischen ihnen zu wechseln:

$('.creditCardText').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
  }
  $(this).val(foo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="creditCardText" />

Ansicht auf jsFiddle

Answer 3

Basierend auf @think123 Antwort, in Vanilla JS, ohne JQuery:

document.querySelector('.creditCardText').addEventListener('input', function(e) {
  var foo = this.value.split("-").join("");
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
  }
  this.value = foo;
});

<input class="creditCardText" type="text">

Ich weiß, die Frage ist über JQuery, aber ich denke, diese Antwort könnte auch helfen.

Answer 4

Wenn Sie nach einer reinen Javascript-Lösung suchen, schauen Sie sich meine Funktion unten an. Sie unterstützt das American-Express-Format (15 Ziffern) sowie Visa, MasterCard und andere (16 Ziffern).

Achten Sie auf einfache Lösungen, die den gesamten Wert ersetzen und den Fokus immer an das Ende der Eingabe setzen: Es kann ärgerlich sein, wenn der Benutzer das, was er zuvor eingegeben hat, ändert.

input_credit_card = function(input) {
  var format_and_pos = function(char, backspace) {
    var start = 0;
    var end = 0;
    var pos = 0;
    var separator = " ";
    var value = input.value;

    if (char !== false) {
      start = input.selectionStart;
      end = input.selectionEnd;

      if (backspace && start > 0) // handle backspace onkeydown
      {
        start--;

        if (value[start] == separator) {
          start--;
        }
      }
      // To be able to replace the selection if there is one
      value = value.substring(0, start) + char + value.substring(end);

      pos = start + char.length; // caret position
    }

    var d = 0; // digit count
    var dd = 0; // total
    var gi = 0; // group index
    var newV = "";
    var groups = /^\D*3[47]/.test(value) ? // check for American Express
      [4, 6, 5] : [4, 4, 4, 4];

    for (var i = 0; i < value.length; i++) {
      if (/\D/.test(value[i])) {
        if (start > i) {
          pos--;
        }
      } else {
        if (d === groups[gi]) {
          newV += separator;
          d = 0;
          gi++;

          if (start >= i) {
            pos++;
          }
        }
        newV += value[i];
        d++;
        dd++;
      }
      if (d === groups[gi] && groups.length === gi + 1) // max length
      {
        break;
      }
    }
    input.value = newV;

    if (char !== false) {
      input.setSelectionRange(pos, pos);
    }
  };

  input.addEventListener('keypress', function(e) {
    var code = e.charCode || e.keyCode || e.which;

    // Check for tab and arrow keys (needed in Firefox)
    if (code !== 9 && (code < 37 || code > 40) &&
      // and CTRL+C / CTRL+V
      !(e.ctrlKey && (code === 99 || code === 118))) {
      e.preventDefault();

      var char = String.fromCharCode(code);

      // if the character is non-digit
      // OR
      // if the value already contains 15/16 digits and there is no selection
      // -> return false (the character is not inserted)

      if (/\D/.test(char) || (this.selectionStart === this.selectionEnd &&
          this.value.replace(/\D/g, '').length >=
          (/^\D*3[47]/.test(this.value) ? 15 : 16))) // 15 digits if Amex
      {
        return false;
      }
      format_and_pos(char);
    }
  });

  // backspace doesn't fire the keypress event
  input.addEventListener('keydown', function(e) {
    if (e.keyCode === 8 || e.keyCode === 46) // backspace or delete
    {
      e.preventDefault();
      format_and_pos('', this.selectionStart === this.selectionEnd);
    }
  });

  input.addEventListener('paste', function() {
    // A timeout is needed to get the new value pasted
    setTimeout(function() {
      format_and_pos('');
    }, 50);
  });

  input.addEventListener('blur', function() {
    // reformat onblur just in case (optional)
    format_and_pos(this, false);
  });
};

input_credit_card(document.getElementById('credit-card'));

<form action="" method="post">
  <fieldset>
    <legend>Payment</legend>
    <div>
      <label for="credit-card">Credit card</label>
      <input id="credit-card" type="text" autocomplete="off" />
    </div>
  </fieldset>
</form>

Ansicht auf jsFiddle

Answer 5

Durch die Änderung des Vorschlags von @think123 y @TheStoryCoder , Ich habe selectionStart und SelectionEnd für den Cursor hinzugefügt. Danach die Cursorposition an geeigneter Stelle erhöhen und die Cursorposition ändern. Es sollte lösen die Cursor-Position ist an nicht als erwartete Position.

$('.creditCardText').keyup(function() {

  var ss, se, obj;
  obj = $(this);
  ss = obj[0].selectionStart;
  se = obj[0].selectionEnd;

  var curr = obj.val();

  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
  }

  if (((curr.length % 5 == 0) && ss == se && ss == curr.length) || (ss == se && (ss % 5 == 0))) {
    ss += 1;
    se += 1;
  }

  if (curr != foo) {
    $(this).val(foo);
    obj[0].selectionStart = ss;
    obj[0].selectionEnd = se;
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="creditCardText" type="text">