I was asked to implement resizing textbox based on content length in one of my projects, to avoid having to deal with scroll bars.
And here is the code that works for me:
Anyway, I found out that this method is works for me only when I type my text in the box.
It is not working when I having no focus on the textbox and call the
Try the following code to your page.
Call the
Hope it works for you too. =)
And here is the code that works for me:
<html>
<head>
<script>
function textAreaResize(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea id="textArea1" onkeyup="textAreaResize(this)" style="overflow:hidden"></textarea>
<asp:textbox id="txt1" runat="server" Width="500px" Height="25px" TextMode="MultiLine" onkeyup="textAreaResize(this);"></asp:textbox>
</body>
</html>Anyway, I found out that this method is works for me only when I type my text in the box.
It is not working when I having no focus on the textbox and call the
textAreaResize method to resize it. Position the cursor at the end of the text will resolve the issue.Try the following code to your page.
<html>
<head>
<script>
function textAreaResize(o) {
SetCursorToTextEnd(o.id);
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
function SetCursorToTextEnd(textControlID)
{
var text = document.getElementById(textControlID);
if (text != null && text.value.length > 0) {
if (text.createTextRange) {
var FieldRange = text.createTextRange();
FieldRange.moveStart('character', text.value.length);
FieldRange.collapse();
FieldRange.select();
}
}
}
</script>
</head>
</html>Call the
textAreaResize method on your page load will do.Hope it works for you too. =)
