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

Der einfachste Weg ist der folgende mit einfachen javascript onkey und Funktion ... es wird ein Bindestrich nach jeder 3 Zeichen, die Sie eingeben / tippen.

function addDash(element) {
  let ele = document.getElementById(element.id);
  ele = ele.value.split('-').join(''); // Remove dash (-) if mistakenly entered.

  let finalVal = ele.match(/.{1,3}/g).join('-');
  document.getElementById(element.id).value = finalVal;
}

<input type="text" class="form-control" name="sector" id="sector" onkeyup="addDash(this)" required>

Answer 2

Alle anderen, die vor mir geantwortet haben, haben Recht, und ihr Code ist definitiv kurz und ordentlich, aber er ist ein bisschen fortschrittlich, in dem Sinne, dass sie entweder reguläre Ausdrücke oder ein Plugin verwenden. So etwas kann auch mit einfachen js/jquery erreicht werden, was Sie, Ihrem Beispielcode nach zu urteilen, zu erreichen versuchen. Da diese Frage etwa 3 Jahre alt ist, haben Sie sicher schon erreicht, was Sie wollten, aber ja, Sie waren nah dran Das hätten Sie versuchen sollen:

$('.creditCardText').keyup(function() {
  var cctlength = $(this).val().length; // get character length

  switch (cctlength) {
    case 4:
      var cctVal = $(this).val();
      var cctNewVal = cctVal + '-';
      $(this).val(cctNewVal);
      break;
    case 9:
      var cctVal = $(this).val();
      var cctNewVal = cctVal + '-';
      $(this).val(cctNewVal);
      break;
    case 14:
      var cctVal = $(this).val();
      var cctNewVal = cctVal + '-';
      $(this).val(cctNewVal);
      break;
    default:
      break;
  }
});

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

JSFiddle Link

Answer 3

Sie können mit Vanilla JS erreichen und benötigen kein Plugin, um das zu tun. Siehe den Code unten. Sie können die var split auf Ihre Bedürfnisse zugeschnitten. Kredite an https://webdesign.tutsplus.com/tutorials/auto-formatting-input-value--cms-26745 .

(function($, undefined) {

    "use strict";

    // When ready.
    $(function() {

        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) {

            console.log('sss')
            // When user select text in the document, also abort.
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }

            // When the arrow keys are pressed, abort.
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }

            var $this = $(this);
            var input = $this.val();
                    input = input.replace(/[\W\s\._\-]+/g, '');

                var split = 4;
                var chunk = [];

                for (var i = 0, len = input.length; i < len; i += split) {                              chunk.push( input.substr( i, split ) );
                }

                 console.log(chunk)
                $this.val(function() {
                    return chunk.join("-");
                });

        } );

        /**
         * ==================================
         * When Form Submitted
         * ==================================
         */
        $form.on( "submit", function( event ) {

            var $this = $( this );
            var arr = $this.serializeArray();

            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); // Sanitize the values.
            };

            console.log( arr );

            event.preventDefault();
        });

    });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" method="post" action="">

        <label for="number">Enter number</label>
        <div class="flex">
            <input id="number" name="number" type="text" maxlength="15" />
        </div>

</form>