Маскировка введенного номера кредитной карты на стороне клиента

Question

У меня есть ViewModel, содержащая строку CreditCard.То, что я ищу, - это атрибут или его маскировка таким образом, что в каждые 4 цифры добавляется один пробел.Примерно так: 4764 4000 9425 3041 Есть предложения?

Answer 1

попробуйте это:

const num = 4764400094253041;
const regex = /\d{4}/g;

const res = num.toString().replace(regex, (maths) => maths === 12 ? maths : maths + ' ')

const responseEl = document.getElementById("response");

responseEl.innerText = res;

<div id="response"></div>

Answer 2

Маска ввода Робина Хербота jQuery (https://github.com/RobinHerbots/Inputmask), кажется, делает то, что вы ищете. Вы можете указать форматирование маски в javascript или поставить его как атрибут.

<input id="cc" type="text" data-inputmask="'mask': '9999 9999 9999 9999'" />

ЗдесьЭто пример кода (отказ от ответственности, не мой, кредит: Крис Койер):

https://codepen.io/chriscoyier/pen/PbOEqL

Answer 3

Вот способ сделать это с помощью JavaScript:

var num = 1215464565; 
var newNum = num.toString().match(/.{4}/g).join(' ');
console.log(newNum);

RelatedPost