Автоматическое числовое пространство в форме ввода

Question

Я видел возможность ограничить способ отображения текста в форме. Например, если это кредитная карта, когда пользователь пишет, автоматически создается пробел между 4 числами. Как это сделать?

(я не говорю о проверке регулярных выражений, когда пользователь нажимает кнопку Отправить, но до этого, когда пользователь записывает числа во входных данных)

<form action='externs/select-insert.php' method='post'>
	<input type='text' id='card' name='card' value='### ###'>
</form>

Answer 1

Вы можете сделать это таким образом, используя EventListener и replace модификацию входного значения на keydown (не change, потому что оно будет срабатывать только тогда, когда input больше не на focus )

document.querySelector('#card').addEventListener('keydown', (e) => {
    e.target.value = e.target.value.replace(/(\d{4})(\d+)/g, '$1 $2')
})
/* Jquery */
$('#card').keyup(function() {
  $(this).val($(this).val().replace(/(\d{4})(\d+)/g, '$1 $2'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='externs/select-insert.php' method='post'>
	<input type='text' id='card' name='card' value='### ###'>
</form>