Как добавить только цифры и пробелы в input?

248

17 августа 2018, 22:50

Как ограничить вывод символов и их количество в 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">

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

Answer 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' />

Answer 2

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

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

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">

Answer 3

Все очень просто. Вешаете событие на инпут - 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">

Answer 4

Как ограничить вывод символов и их количество в 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>