在输入的每 4 个字符后插入破折号

Question

我想在输入的每 4 个字符后插入一个破折号。 我有一个信用卡输入框。 当用户输入并到达每个第 4 个字符时，jQuery 将插入一个连字符 ( - )。

例如： 1234-5678-1234-1231

更新：我正在尝试一些代码，我认为我非常接近正确的代码，但我有一些问题。 这是我的代码示例；

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

我非常喜欢这个用于自动格式化的插件：这里.

只要您已经在使用 JQuery，那就是。

您可以使用一行代码轻松地强制使用破折号，如下所示：

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

当用户在该字段中键入时，破折号将自动出现在正确的位置，他们将无法删除它们。

此外，您可以使用? 面具中的人物。 例如，要接受 14 位和 16 位数字的输入，您可以执行以下操作：

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

请记住，这只是客户端验证

---

编辑：掩码插件假定该字段有一种或有限多种正确格式。 例如，信用卡号码只有几种格式。该插件可确保您的输入仅采用其中一种格式。

所以从技术上讲，如果你想在每四位数字后加一个破折号，但对于任意数量的数字，那么这个插件不适合你。

我建议您将可能的输入限制为合理，因为肯定没有 1000 位长信用卡这样的东西。 但是，如果您真的想要该功能，则必须自己编写脚本或寻找其他插件。 截至目前，我不知道一个。

Answer 2

我已经修复了您的代码，但仍然强烈建议服务器验证并使用四个文本框，并在它们之间巧妙地切换：

 $('.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 上查看

Answer 3

基于@think123 的答案，在 vanilla JS 中，没有 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">

我知道这个问题是关于 JQuery 的，但我认为这个答案也有帮助。

Answer 4

我想在输入的第4个字符后插入一个破折号。 我有一个信用卡输入框。 当用户输入文字并到达第4个字符时，jQuery会插入连字符（ - ）。

例如： 1234-5678-1234-1231

更新：我正在尝试一些代码，我想我已经很接近正确的代码，但是我有一些问题。 这是我的代码示例；

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

如果您正在寻找纯 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 上查看

Answer 6

通过修改@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">

Answer 7

在我上面回答的所有其他人都是对的，他们的代码绝对简短而整洁，但有点超前，因为他们要么使用正则表达式，要么使用插件。 这样的事情也可以通过基本的 js/jquery 来实现，从你试图实现的示例代码来看。 由于这个问题是 3 岁左右，你现在一定已经得到了你想要的，但是，你已经接近了..这是你应该尝试的：

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

Answer 8

您可以使用 vanilla JS 来实现，并且不需要插件来做到这一点。 请参考下面的代码。 您可以更改var split以满足您的需要。 归功于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>

Answer 9

最简单的方法是以下使用简单的 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>