Форум

him · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 17.11.2020, 10:29

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

laimas · #4 (**permalink**) 17.11.2020, 10:48

Сообщение от him

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

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

рони · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript