Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Resize textare field as text is entered

Posted on 2014-01-21
8
Medium Priority
?
218 Views
Last Modified: 2014-01-21
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
Comment
Question by:myyis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39797648
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
 
LVL 1

Author Comment

by:myyis
ID: 39797720
Is it possible with pure JS?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39797733
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 1

Author Comment

by:myyis
ID: 39797754
I don't use jquery
0
 
LVL 58

Expert Comment

by:Gary
ID: 39797808
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
 
LVL 1

Author Comment

by:myyis
ID: 39798433
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39798466
0
 
LVL 1

Author Comment

by:myyis
ID: 39798534
great! thank you.
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question