Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

Resize textare field as text is entered

The solution here works for changing the height dynamically.

http://jsfiddle.net/FNMSP/2/

1.  I need it to auto-shorten the height of the textarea when text is erased (the reverse of what is doing now )

2. I also need that the width of the textarea resizes automatically (shorten or  lenghten)
So it will enlarge till reaching a max-width, then will start increasing the height.

Thank you!
0
myyis
Asked:
myyis
  • 4
  • 4
1 Solution
 
GaryCommented:
Since you are using MooTools
http://mootools.net/forge/p/form_autogrow

For the width - that would be an unusual one since the textarea would automatically wrap so there is no defined width to calculate.
0
 
myyisAuthor Commented:
Is it possible with pure JS?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
myyisAuthor Commented:
I don't use jquery
0
 
GaryCommented:
http://jsfiddle.net/GaryC123/eq554/5/

<textarea onkeyup="autogrow(this)"></textarea>
<style>
textarea {
    min-height:50px;
    overflow:hidden;
}
</style>
<script>
    function autogrow(textField) {
    rows = textField.value.split("\n").length + 1
    textField.style.height = (rows * 14) + "px";
    }
</script>

Open in new window

0
 
myyisAuthor Commented:
Thank you it is very like to what I wanted to do.
The only problem is that if I don't use enter button and keep writing it does not work.
Any idea?
0
 
myyisAuthor Commented:
great! thank you.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now