leon9208
@leon9208
Начинающий web-developer

Как сделать чтобы каждый символ вставлялся в каждый отдельный тег?

Хочу реализовать возможность заполнение бланка документа. Введенные данные в бланке должны быть разбиты по буквам и они в отдельных ячейках. Так вот как разбить введенный текст я разобрался, а вот как уже из массива добавить в отдельные ячейки не могу допереть.

Код:
$('#name').on('keyup change', function(){
  var $t = $(this),
			$cells = $('.cells .cell');
  
  var userName = '';
  $t.each(function(){
    userName += $(this).val().split('');
  })
	console.log(userName)
	
	$cells.each(function(){
    $cells.text(userName);
  })
});


Можно посмотреть живой пример на Codepen
  • Вопрос задан
  • 69 просмотров
Решения вопроса 2
TommyV888
@TommyV888
-
Вы немного не правильно добавляете буквы, замените:
cells.append(split);
на
$(this).text(split[i]);
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
$('#name').on('input', function() {
  $('.cell').text(i => this.value[i] || '');
});

или

document.querySelector('#name').addEventListener('input', e => {
  document.querySelectorAll('.cell').forEach((n, i) => {
    n.textContent = e.target.value[i] || '';
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы