Первоначальный вариант ответа с 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';
});