Solved

Resize textare field as text is entered

Posted on 2014-01-21
8
207 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
  • 4
  • 4
8 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:myyis
Comment Utility
Is it possible with pure JS?
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
0
 

Author Comment

by:myyis
Comment Utility
I don't use jquery
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:myyis
Comment Utility
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 500 total points
Comment Utility
0
 

Author Comment

by:myyis
Comment Utility
great! thank you.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now