Как реализовать свою (желательно чистый js) или готовое решение?
Первоначальный вариант ответа с 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';
});
Я думаю что это должен быть массив input полей, как только в текущем активном инпуте кол-во символов достигает предела добавляется следующий и становится активным
Результатом будет склейка массива значений инпутов символом \n