1

Как ограничить вывод символов и их количество в input + через каждые 4 цифры ставить пробел.

Например я ввожу в инпут номер кредитки и мне нужно разделять каждые четыре цифры пробелом кроме последних, 3423 3565 2345 2345 как-то так должно получиться, и ограничить ввод что бы нельзя было вводить буквы точки.

var input = $('.onlynum');

input.keypress(function(event) {
    return event.charCode >= 48 && event.charCode <= 57
});

<input class='onlynum' type="text" placeholder='Card num' maxlength="16">

Вроде разобрался с тем что бы вырезать символы, но так же и пробел вырезается, вобщем не понимаю как сделать.

1

4 ответа 4

1

document.querySelector('input').addEventListener('keydown', function (e) {
  let value = this.value.replace(/\s+/g, '');
  let isBackspace = e.key === 'Backspace'; 

  if ((e.key.length === 1 && /^[^\d\s]+$/.test(e.key)) || (!isBackspace && value.length === 16)) {
      e.preventDefault();
      return false;
  }
  
  this.value = value.split('').reverse().join('').replace(/\B(?=(\d{4})+(?!\d))/g, " ").split('').reverse().join('').trim();
});
Insert your card number: <input type='text' />

4
  • 1
    А удалять как?))
    – user192664
    3 июл 2018 в 10:45
  • @NikitaSmith, Да, благодарю!
    – user207618
    3 июл 2018 в 11:28
  • Перемещаться стрелками по введенным цифрам нельзя, Home, End не работают, кнопку Delete использовать нельзя. 3 июл 2018 в 11:29
  • Домашнее задание - довести до ума. Хотел было написать вообще класс, с отслеживанием всяких selectionStart, а потом понял что для ответа и так сойдёт.
    – user207618
    3 июл 2018 в 11:56
1

Самый рабочий вариант

Есть возможность удаления, не выводит лишних пробелом и можно задавать необходимое количество символов, а так запрещено копирование во избежание ввода недопустимых символов, например, теста.

const input = document.querySelector(".test_inpit");
input.onpaste = (e) => e.preventDefault();
input.addEventListener("keyup", e => {
  if (e.keyCode !== 8 && e.keyCode != 46) {
    let newValue = e.target.value.replace(/\D/g, "");
    newValue = newValue.replace(/(.{4})/g, "$1 ");
    e.target.value = newValue;
  }
});
<input type="text" class="test_inpit">

Если хочешь использовать максимальное длину для ввода:

const input = document.querySelector(".test_inpit");
input.onpaste = (e) => e.preventDefault();
const stringLength = 16; // Длинна строки без учета пробелов
input.maxLength =
  stringLength % 4 === 0 ?
  stringLength + (Math.floor(stringLength / 4) - 1) :
  stringLength % 4 !== 0 ?
  stringLength + Math.floor(stringLength / 4) :
  null;

input.addEventListener("keyup", e => {
  if (e.keyCode !== 8 && e.keyCode != 46) {
    let newValue = e.target.value.replace(/\D/g, "");
    newValue = newValue.replace(/(.{4})/g, "$1 ");
    e.target.value = newValue;
  }
});
<input type="text" class="test_inpit">

Или просто задать это значение в maxlength с учетом пробелов:

<input type="text" class="test_inpit" maxlength="19">
7
  • Самый рабочий, а вводишь хоть сотню символов.
    – user207618
    3 июл 2018 в 11:29
  • @Other суть в том что работает, как надо
    – user192664
    3 июл 2018 в 11:30
  • Чем он работает нормально? Не один из ответов, не работает нормально, так-как, я мышкой могу вставить, что угодно и даже буквы.
    – And
    3 июл 2018 в 12:25
  • @And ну в твоем примере тоже самое
    – user192664
    3 июл 2018 в 12:48
  • В моем примере? Где это интересно мой пример?
    – And
    4 июл 2018 в 6:19
0

Все очень просто. Вешаете событие на инпут - keyup, так как нам интересен момент когда уже введен символ (keypress и keydown срабатывают до того как символ будет записан в инпут, если ставить их - то нужно еще добавить setTimeout). А дальше при срабатывании этого события берем значение самого этого инпута, убираем из него все символы которые не являются цифрами, а дальше уже пробегаемся по строке - и после каждых 4-х символов вставляем пробел (первые 3 раза, дальше нам пробелы не нужны). И в итоге получается отформатированный номер карты.

Т.е. суть в том, что пускай он вводит что хочет - но оставим мы только цифры, а затем отформатируем их так, как нам нужно.

document.querySelector('[name="card"]').addEventListener('keyup', function(){
    this.value = formatCard(this.value);
});

function formatCard(card){
  var digits = card.replace(/[^0-9]/gi, ''),
        result = '';
  for (var i = 1; i <= digits.length; i++){
    result += digits[i-1];
    if (i % 4 == 0 && i / 4 <4 && i != digits.length){
      result += ' ';
    }
  }
  return result;
}
input{
  width:300px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 10px 20px;
  text-align: center;
}
<input type="text" name="card">

2
  • Напишите 4 цифры и попробуйте стереть, не зажимая Backspace. 3 июл 2018 в 11:18
  • @SashaOmelchenko элементарно добавить еще одну проверку в условие добавления пробела. Но если уж вы настаиваете, то я добавил это условие. 3 июл 2018 в 11:25
0

Как ограничить вывод символов и их количество в input + через каждые 4 цифры ставить пробел.

var input = document.querySelector('input');
// 8 Backspace; 46 Del; 36 Home; 35 End; 37 <-; 39 ->
var exlude = [8, 35, 36, 37, 39, 46]; // White listed keyCodes
input.addEventListener('keydown', function(e) {
  var code = e.keyCode
  // Не цифры и белый список не пройдет
  if (!(code >= 48 && code <= 57) && !!!exlude.find(k => k === +code)) {
    e.preventDefault();
    return false;
  }
  var len = e.target.value.length
  // Добавит пробелы
  if ((code >= 48 && code <= 57)) // Только цифры
    if (len % 5 === 0 && len < 20 && code !== 8)
      e.target.value += " "

});
<form action="/action_page.php">
  <input class='onlynum' type="text" placeholder='Card num' maxlength="20" title="A credit card number" name="card" pattern="[0-9]{16, 20}" required>
  <input type="submit">
</form>

11
  • Зачем в конце лишний пробел?
    – user207618
    3 июл 2018 в 10:41
  • @Other благодарю, убрал. =)
    – Kosta B.
    3 июл 2018 в 10:44
  • если перовым символом ввести букву и продолжть вводить цифры посмотри что будет
    – user192664
    3 июл 2018 в 10:46
  • @NikitaSmith благодарю, исправил. =)
    – Kosta B.
    3 июл 2018 в 10:53
  • @KostaB. сейчас пробел в начале появляется, а так норм)
    – user192664
    3 июл 2018 в 10:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.