Маска ввода банковской карты JavaScript


Ниже размещен пример маски с четырьмя полями input (Editbox) для ввода в них номера банковской карты, с использованием JavaScript. В демо-примере номер карты приходит с пробелами в формате: XXXX XXXX XXXX XXXX (16 цифр).
Пример маски ввода номера банковской карты
В HTML-исходнике страницы между тегами <head> вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
function test(obj) {
var
inp1 = document.getElementById('CardNumber1');
var
inp2 = document.getElementById('CardNumber2');
var
inp3 = document.getElementById('CardNumber3');
var
inp4 = document.getElementById('CardNumber4');
var
number = document.getElementById('Card');
number.value = inp1.value + ' ' + inp2.value + ' ' + inp3.value + ' ' + inp4.value;

   
if (obj.value.length == 4) {
        var next = obj.nextSibling;
        while(next.nodeType != 1 && next.nextSibling)
            next = next.nextSibling;
        if (next.nodeType == 1)
            next.focus();
    }
}

function validate(inp) {
inp.value = inp.value.replace(/[^0-9]/, "");
}
</script>
В 3-й строке скрипта: CardNumber1 - это id первого поля input (Editbox).
В 4-й строке скрипта: CardNumber2 - это id второго поля input (Editbox).
В 5-й строке скрипта: CardNumber3 - это id третьего поля input (Editbox).
В 6-й строке скрипта: CardNumber4 - это id чтвертого поля input (Editbox).
В 7-й строке скрипта: Card - это id нижнего поля input (с него приходит номер).
Для каждого из 4-х полей для ввода, в теге input(а) прописать:
onkeyup="test(this);validate(this);return false;"
oninput="validate(this);test(this);return false;"
Верхние четыре поля можно исключить из формы (слоя) или расположить вне формы, чтобы данные из этих полей не отправлялись.
Для каждого поля input (кроме нижнего) прописать максимальное количество символов разрешенное для ввода = 4
Пример поля input для ввода номера в HTML-коде:
<input type="text" id="CardNumber2" name="Поле 2" value="" maxlength="4" placeholder="xxxx" onkeyup="test(this);validate(this);return false;" oninput="validate(this);test(this);return false;">
Для нижнего поля Card можно использовать атрибут readonly -- Только чтение.
Пример поля Card для вывода результата в HTML-коде:
<input type="text" id="Card" name="Номер карты" value="" readonly="" autocomplete="off" spellcheck="false" placeholder="**** **** **** ****">
Номер карты приходит с пробелами в формате: XXXX XXXX XXXX XXXX
Чтобы данные о карте приходили в формате: XXXXXXXXXXXXXXXX (без пробелов) в 8-й стрке скрипта удалите пробелы, в одинарных кавычках.
Пример с удаленными пробелами в одинарных кавычках:
number.value = inp1.value + '' + inp2.value + '' + inp3.value + '' + inp4.value;
Скачать исходник .wbs (версия 12.3.0)