There is a way of getting the height of the text when it is smaller than the textarea: setting the height of the textarea to 1 line temporary.
The problem with this is that it requires updating the height of the area on every single key stroke. here is a Mootools version of the code. I have used a div container around the textarea to "buffer" the height changes, so the page layout does not get affected when the textarea height is set to one line:
Here is a solution I'm using to grow and shrink textarea when typing. It's little bit CSS and little bit Javascript. The idea is to use container div wich will groove and shrink depending on it's content height. To do that I'm using another div elemnt hidden under the textbox and seting textbox height to 100%. It works great on iPhone.
Could you please explain to me what TEXTAREA_LINE_HEIGHT variable does? It does not seem to affect anything but number of lines to shift down. But how does it work?
How about shrinking as "shrink to 1 line temporarily and then regrow as necessary", but performed as little as possible? One could, for example, count the number of newlines and only shrink if that count decreases.
There is a way of getting the height of the text when it is smaller than the textarea: setting the height of the textarea to 1 line temporary.
ReplyDeleteThe problem with this is that it requires updating the height of the area on every single key stroke. here is a Mootools version of the code. I have used a div container around the textarea to "buffer" the height changes, so the page layout does not get affected when the textarea height is set to one line:
theTextarea.addEvent('keyup', function() {
this.getParent().setStyle('height', this.clientHeight);
if (this.scrollHeight <= this.clientHeight) {
this.setStyle('height', TEXTAREA_LINE_HEIGHT);
}
this.setStyle('height', this.scrollHeight + 5*TEXTAREA_LINE_HEIGHT);
this.getParent().setStyle('height', this.clientHeight);
});
Here is a solution I'm using to grow and shrink textarea when typing. It's little bit CSS and little bit Javascript.
ReplyDeleteThe idea is to use container div wich will groove and shrink depending on it's content height. To do that I'm using another div elemnt hidden under the textbox and seting textbox height to 100%. It works great on iPhone.
Here is my solution with CSS and JS:
<style>
#growArea {
width: 100%; height: 100%; position: absolute; top: 0px;
}
#growArea, #textDiv {
font-family: Arial; font-size: 12px; line-height: 15px;
}
#textDiv {
position: relative; top: 0px; white-space: pre-wrap;
}
#textareaContainer {
position: relative; width: 200px; min-height: 100px; padding-bottom: 75px;
}
</style>
<script>
function resize() {
document.getElementById('textDiv').innerHTML = document.getElementById('growArea').value;
}
</script>
<div id="textareaContainer"><div id="textDiv"></div>
<textarea id="growArea" onkeyup="resize();"></textarea>
</div>
Works great for me! Here's how I wired it up to all textareas on the page via jQuery:
ReplyDeletevar TEXTAREA_LINE_HEIGHT = 13;
function grow(textarea) {
var newHeight = textarea.scrollHeight;
var currentHeight = textarea.clientHeight;
if (newHeight > currentHeight) {
textarea.style.height = newHeight + 5 * TEXTAREA_LINE_HEIGHT + 'px';
}
}
$('textarea').keyup(function(e){
grow(e.srcElement);
});
Since pasting doesn't generate a key-up, you might want to add grow() as a change handler, as well:
ReplyDelete<textarea id="growingTextarea"
onkeyup="grow();"
onchange="grow();">
</textarea>
Could you please explain to me what TEXTAREA_LINE_HEIGHT variable does? It does not seem to affect anything but number of lines to shift down. But how does it work?
ReplyDeleteHow about shrinking as "shrink to 1 line temporarily and then regrow as necessary", but performed as little as possible? One could, for example, count the number of newlines and only shrink if that count decreases.
ReplyDelete