Friday, July 30, 2010

Resize Textbox/Textarea based on content length

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:
<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. =)
 

Get paid for your opinions! Click on the banner above to join Planet Pulse. Its totally free to sign up, and you can earn UNLIMITED. Find out more by visiting PLANET PULSE.
July Code Blog Copyright © 2010 Blogger Template Designed by Bie Blogger Template