jessica February 2016

Auto-adjusting textarea to be the same height as inner-text onkeydown

I'm trying to auto adjust the height of a textarea onkeydown, but it's only working partially. When you're typing text into the textarea, it auto-adjust the height of the textarea per new line of text, which is what I want. But when you're backspacing the text, it auto-adjust the height of the textarea per character-backspaced when you're on the last 5 characters of every last line. What am I doing wrong?

#textarea { 
overflow: hidden; 
} 

<textarea id = 'textarea' onkeydown = "adjust()"></textarea> 

<script> 
function adjust() { 

document.getElementById("textarea").style.height = document.getElementById("textarea").scrollHeight+'px'; 

} //end of function adjust() 
</script>

Answers


Nechemya Kanelsky February 2016

Create your textarea:

<textarea id="textarea" onkeyup="InputAdjust(this)"></textarea>

then create a function to do the auto height

<script>
    function InputAdjust(o) {
        o.style.height = "1px";
        o.style.height = (25+o.scrollHeight)+"px";
    }
</script>

now its +25px, you can change it.

example: https://jsfiddle.net/urp4nbxf/1/


DinoMyte February 2016

Try this :

$("#textarea").on("keydown",function(){
    if($(this).css("height").replace("px","") <        $('#textarea').get(0).scrollHeight - 5) 
  $(this).css("height",($('#textarea').get(0).scrollHeight-5) + "px"); 
});

Example : https://jsfiddle.net/DinoMyte/dpx1Ltn2/2/


jessica February 2016

The code below will work, but you will have to manually count how many characters fit in per row, in the textarea. How many characters fit in per row will depend on the cols of the textarea, and of course the font-size of the text.

#textarea {
overflow: hidden;
}

<textarea id = 'textarea' cols = '7' rows = '1' onkeydown = "adjust()"></textarea>

<script>

function adjust() {

var maxCharactersPerColumn = 9; //You have to manually count how many characters fits in per row

var key = event.keyCode;
if (key == 8 || key == 46) {
var length = document.getElementById("textarea").value.length-2;
} //end of if (key == 8 || key == 46)
else {
var length = document.getElementById("textarea").value.length;
} //end of else !(key == 8 || key == 46)

var rows = Math.floor(length/maxCharactersPerColumn)+1;
document.getElementById("textarea").rows = rows; 

} //end of function adjust()
</script>

Post Status

Asked in February 2016
Viewed 2,875 times
Voted 4
Answered 3 times

Search




Leave an answer