Как реализовать свою (желательно чистый js) или готовое решение?

Question

[Ivan Ukhov]

Есть задача:

На черном фоне реализовать место (похожее на textarea) куда можно будет вводить текст (при этом фон остаётся тот же). Изначально видна только одну строку для ввода, и снизу строки есть линия (как в тетрадках в линейку), как только заканчивается строка появляется новая и так далее, естественно при удалении символов из этой строки количество строк уменьшается.

Может быть кто то сталкивался с подобным? или есть какое-то готовое решение?

Answer 1

[Сергей Соколов]

Первоначальный вариант ответа с contentEditable

Надо использовать div с contentEditable="true" и фоном, который даст подчёркивание.

Фиддл.

<div class="textfield" contentEditable="true">напиши-ка!
</div>

.textfield {
	font-size:16px;
	color:white;
	min-height:16px;
	line-height:20px;
	width:200px;
	border:1px solid #999;
	background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNpiNDY2ZiAXMDFQAEY1j2oe1TyoNLNoOu0nX/P1fY4D42yAAAMA7aYDxR1GwC8AAAAASUVORK5CYII=')
}
body {background:#333; font-family:Arial, sans-serif}

Upd. лушче всё-таки в данной задаче использовать TEXTAREA, т.к. это решает проблему paste'а HTML-разметки с форматированием, рушащим высоту строки. Брать при каждом изменении свойство scrollHeight и под него подгонять шагами высоту textarea. Fiddle

<textarea rows="1" cols="20" id="ta1" class="textfield">напиши-ка!
</textarea>

var ta1 = document.getElementById('ta1');
ta1.addEventListener('input', function(){
	var rows = Math.ceil( ta1.scrollHeight / 20 ) - 1;
	ta1.style.height = 20 * rows + 'px';
});

Comments

[Сергей Соколов]

Ivan Ukhov: по ctrl+v помогает слушать событие input и заменять innerHTML на innerText.

el.addEventListener('input', function(){
  el.innerHTML = el.innerText;
});

[Ivan Ukhov]

Сергей Соколов: Спасибо, остался один момент это то что в фаерфоксе и IE
текст не переносится

[Сергей Соколов]

Ivan Ukhov: у меня в FF переносится по словам. Но другая проблема – с реакцией на событие input каждый ввод буквы сбрасывает курсор в начало текста. С этим тоже можно справиться, запоминая положение курсора каждый раз. Это вне scope данного вопроса.

[Ivan Ukhov]

Странно, буду разбираться в любом случае спасибо большое

[Ivan Ukhov]

Сергей Соколов: я понимаю что поднадоел но не подскажите как это сделать?

[Сергей Соколов]

Ivan Ukhov: я подумал, что лучше этого не делать : ) Сделал вариант с textarea, вроде работает. Это лучше, т.к. спасает от paste'а разметки. Просто берётся значение scrollHeight и меняется высота textarea. Известна точная высота каждой строки.

[Ivan Ukhov]

Сергей Соколов: Так когда мы делаем
myTextarea.innerHTML = myTextarea.textContent
то мы вроде как раз решаем проблему с paste разметкой

[Сергей Соколов]

Ivan Ukhov: так прелесть textArea, в отличие от div, в том, что невозможно вставить текст с форматированием! Т.е. вообще не нужно возиться с очисткой от тегов.

[Ivan Ukhov]

Сергей Соколов: Да, но придётся возится что при удалении слов строчки должны пропадать

[Сергей Соколов]

Ivan Ukhov: не придётся – высота пересчитывается при любом изменении. У меня в FF фиддл (тот же, что и выше) работает - и с печатью и вставкой и удалением. У вас нет?

Хотя..ведет себя довольно странно – после удаления части строк, высота scrollHeight остаётся с лишними строками. А вставка простого пробела в конце строки в самом начале добавляет высоту и лишнюю строку..

[Ivan Ukhov]

Сергей Соколов: Спасибо вам большое, думаю всё таки оставить вариант с contenteditable, при вводе в него значение записывается в скрытый инпут и при отправке формы просто есть инпут с текстом введённым в данный div.

Answer 2

[McBernar]

Можно сделать через contenteditable для дива.
А для текста, который будет писаться в див сделать подчеркивание через ::after.

Получится такая симуляция строчек.

Comments

[Ivan Ukhov]

а как для текста сделать ::after ?

[Сергей Соколов]

почему не использовать повторяющийся фон с линией, высотой точно равный высоте строки текста?

[Ivan Ukhov]

Сергей Соколов: Вот это похоже на правду))

[Сергей Соколов]

Ivan Ukhov: cделал fiddle

[Ivan Ukhov]

McBernar Сергей Соколов: Да, я тоже, и в принципе очень классный вариант однако есть одно но, если через "ctrl + v" вставить текст скопированный откуда-нибудь и там будет другой размер шрифта да и не только размер то он вставит некорректно, это заставляет взгрустнуть так как решение реально толковое.

[Ivan Ukhov]

Сергей Соколов: а так же в разных браузерах творится крах

Answer 3

[Даша Циклаури]

Я думаю что это должен быть массив input полей, как только в текущем активном инпуте кол-во символов достигает предела добавляется следующий и становится активным
Результатом будет склейка массива значений инпутов символом \n

Comments

[Negwereth]

нет

Answer 4

[Avtomat]

Этот div превращается в textatea при клике, стилизованную так что не заметно что это она с увеливанием количества текста просто увеличиваем ей параметр rows