Ответ 1
Это расширение jquery вставляет пробел каждые четыре символа: https://github.com/stripe/jquery.payment
Вставить тире после каждого 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);
}
}
});
Ответы
Ответ 2
Мне очень нравится этот плагин для автоматического форматирования: здесь.
Пока вы уже используете JQuery.
Вы можете легко заставить дефисы использовать одну строку кода, например:
$("#credit").mask("9999-9999-9999-9999");
Когда пользователь вводит это поле, тире автоматически появятся в нужном месте, и они не смогут их удалить.
Кроме того, вы можете разместить различные длины или форматы кредитных карт с символом ? в маске. Например, чтобы принимать входные данные из 14 и 16 цифр, вы должны сделать следующее:
$("#credit").mask("9999-9999-9999-99?99");
Имейте в виду, что это только проверка на стороне клиента
Изменить. Плагин маски предполагает, что для поля есть одно или конечное количество правильных форматов. Например, есть только несколько форматов, в которые входят номера кредитных карт. Плагин там, чтобы убедиться, что ваш вход будет только в одном из этих форматов.
Итак, технически, если вы хотите тире после каждых четырех цифр, но для любого количества цифр, этот плагин не подходит для вас.
Я бы предложил вам ограничить возможные входы разумными, так как, конечно, нет такой вещи, как 1000-значная длинная кредитная карта. Но если вы действительно хотите эту функциональность, вам придется написать script самостоятельно или найти другой плагин. На данный момент я не знаю об этом.
Ответ 3
Я исправил ваш код, но все же настоятельно рекомендую проверять сервер и с помощью четырех текстовых полей и умного переключения между ними:
$('.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);
});
Ответ 4
На основе ответа @think123, в ванильном 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;
});
Я знаю, что вопрос касается JQuery, но я думаю, что этот ответ тоже может помочь.
Ответ 5
Если вы ищете чистое решение Javascript, посмотрите на мою функцию ниже. Он поддерживает формат American Express (15 цифр), а также Visa, MasterCard и другие (16 цифр).
Следите за простыми решениями, которые заменят все значение и всегда ставят фокус в конце ввода: это может раздражать, если пользователь редактирует то, что он ранее ввел.
DEMO: https://jsfiddle.net/pmrotule/217u7fru/
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'));
Ответ 6
Изменив предложение @think123 и @TheStoryCoder, Я добавил selectStart и 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;
}
});
Ответ 7
Все, кто отвечал выше меня, правы, и их код определенно короткий и аккуратный, но немного продвинутый, в том смысле, что они либо используют регулярные выражения, либо плагин. Что-то вроде этого также может быть достигнуто с помощью базового js/jquery, который, судя по вашему образцу кода, который вы пытаетесь достичь. Поскольку этот вопрос составляет около 3 лет, вы, должно быть, получили то, что хотели, но да, вы были близки. Это то, что вы должны были попробовать:
//Html
/* <input type="text" class="creditCardText" maxlength="19" /> */
$('.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;
}
});
Ответ 8
let string = '33rf354wr3ef5t4353re53';
let result = string.match(/.{1,4}/g);
let final = result.join('-');
console.log(final);
// '33rf-354w-r3ef-5t43-53re-53'
Демо: https://repl.it/@reegan29/Split-and-join-a-string-with-special-characters
Ответ 9
Вы можете добиться этого с помощью 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>