Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Форматированный ввод (https://javascript.ru/forum/misc/81373-formatirovannyjj-vvod.html)

him 16.11.2020 16:40

Форматированный ввод
 
Подскажите пожалуйста, как лучше сделать форматированный ввод цифр и букв ?

12 34 56 RT YU
QW AS DF 12 23
ZX XC 12 23 45

Формат такой, два знака отступ, размер отступа два пробела.
Предварительно смотрю в textarea.

Функционал. Пользователь вводит знаки непрерывно с клавиатуры, они печатаются, тоесть:
123456RTYUQWASDF1223ZXXC122345 а они при вводе разделяются.
Back Space опция тоже потом понадовится, возможно и стрелки для редактирования.
Нужно для наглядности, красоты и удобства восприятия информации.

laimas 16.11.2020 19:30

Ну просто разделить не проблема:

<textarea id="tmp">123456RTYUQWASDF1223ZXXC122345</textarea>

<script>
var t = document.getElementById('tmp');
t.value = t.value.match(/.{2}/g).join('  ');
</script>


А назад, стрелочки, это надо напрягать клаву, а некогда. )

him 17.11.2020 10:29

Спасибо за подсказку.
Попробовал этот вариант.
При вводе текста пробелы не выставляются. Если обновить пару раз страницу, пробелов в пару раз становится больше.
Похоже нужно будет все усложнять..

laimas 17.11.2020 10:48

Цитата:

Сообщение от him
При вводе текста пробелы не выставляются.

А с чего бы они выставлялись, если в коде этого нет? Это всего лишь пример "как", а чтобы при вводе, при обновлении, так это нужно выполнять в обработчиках соответствующих событий.

рони 17.11.2020 11:00

him,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<textarea id="tmp">123456RTYUQWASDF1223ZXXC122345</textarea>

<script>
var t = document.getElementById('tmp'), tmp;
t.addEventListener('input', function() {
clearTimeout(tmp);
tmp = setTimeout(_ => t.value = t.value.replace(/\s/mig, '').match(/.{1,2}/g).join('  '))
}, 100)
</script>


</body>
</html>


Часовой пояс GMT +3, время: 20:04.