37

I want insert a dash after every 4th character in input. I have a credit card input box. When a user is typing and reaches each 4th character, then jQuery will insert a hyphen (-).

For example: 1234-5678-1234-1231

UPDATE: I'm trying some codes and i think i'm so close to correct code but i have some problems. Here is my code sample;

$('.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);

    }
}

});
4

8 に答える 8

26

自動フォーマット用のこのプラグインが大好きです： ここ。

すでにJQueryを使用している限り、つまり。

次のように、1行のコードでダッシュを簡単に強制できます。

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

ユーザーがフィールドに入力すると、ダッシュが自動的に適切な場所に表示され、ダッシュを削除することはできません。

さらに、?マスクに文字を入れて、さまざまな長さや形式のクレジットカードに対応できます。たとえば、14桁と16桁の入力を受け入れるには、次のようにします。

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

これはクライアント側の検証にすぎないことに注意してください

編集：マスクプラグインは、フィールドに1つ、または有限の数の正しい形式があることを前提としています。たとえば、クレジットカード番号が入力される形式はごくわずかです。プラグインは、入力がこれらの形式の1つのみになるようにするためのものです。

したがって、技術的には、4桁ごとにダッシュが必要な場合でも、任意の桁数の場合、このプラグインは適切ではありません。

1000桁の長さのクレジットカードのようなものは確かにないので、可能な入力を合理的に制限することをお勧めします。ただし、その機能が本当に必要な場合は、スクリプトを自分で作成するか、別のプラグインを見つける必要があります。現時点では、私は1つを認識していません。

于 2012-07-24T14:02:51.250 に答える
20

コードを修正しましたが、サーバーの検証と4 つのテキスト ボックスの使用を強くお勧めします。

$('.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" />

jsFiddle で表示

于 2013-04-10T07:46:54.117 に答える
7

純粋な Javascript ソリューションをお探しの場合は、以下の関数をご覧ください。American Express 形式 (15 桁) と、Visa、MasterCard など (16 桁) をサポートしています。

値全体を置き換え、常に入力の最後にフォーカスを置く単純なソリューションに注意してください。ユーザーが以前に入力したものを編集すると、煩わしい場合があります。

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>

jsFiddle で表示

于 2016-10-26T08:50:39.683 に答える
3

@think123と@TheStoryCoderの提案を修正して、カーソルに selectionStart と SelectionEnd を追加しました。その後、適切な場所でカーソル位置を増やし、カーソル位置を変更します。カーソル位置が期待どおりの位置にないことを解決する必要があります。

$('.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">

于 2015-01-12T09:35:11.797 に答える
1

最も簡単な方法は、単純な javascript onkey と関数を使用する次の方法です...入力/入力する 3 文字ごとにダッシュ ハイフンを配置します。

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>

于 2020-12-31T11:47:02.357 に答える