[ACCEPTED]-how to expand a text area when click on-css

Accepted answer

Score: 65

This can be done without the use of JavaScript/jQuery, using 1 CSS transitions.

textarea {
    height: 1em;
    width: 50%;
    padding: 3px;
    transition: all 0.5s ease;
}

textarea:focus {
    height: 4em;
}

<textarea rows="1" cols="10"></textarea>

Score: 29

Something like this would work...

Demo: http://jsfiddle.net/Y3rMM/

CSS...

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML...

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery...

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});

Score: 8

This will work for you:

<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>

I used onfocus instead of 6 onclick because onclick isn't fired if the user uses the 5 tab key to move to the textarea. You'll 4 also want to make sure the user can't resize 3 it themselves - hence the style attribute.

You 2 could also add onblur="this.rows=1;" to shrink it back down once 1 the user moves out of your textarea.

Score: 2

$("textarea").focus(function(){
    $("textarea").animate({ height: "70px" }, 500);
});

default css

textarea{ height: 50px;}

on focus textarea height will 1 increase :) simple jquery

Score: 1

use this plugin > http://plugins.jquery.com/project/elastic

very simple and effective 1 !

Score: 1

Based in doog abides comment using jQuery, I enhanced the code 3 to autoadjust approximately the number of 2 rows acording to the length of the content, and 1 return to 1 when focus is lost.

HTML:

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery:

$('textarea.expand').focus(function () {
    $(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
    $(this).animate({rows: 1}, 500);
    //Resize back to one row if the textarea is manually resized via the handle
    $(this).css({height: ''});
    $(this).css({width: ''});
});

Score: 0

You can do this with CSS only using position: absolute, which 6 will make it float over other elements, and 5 the :focus selector, which will be applied only 4 when the element have the focus. First you 3 need to reserve the textarea size enclosing 2 it in an element:

<div class="textarea"><textarea></textarea></div>

div.textarea {
   height: 50px;
   width: 400px;
}

Then style the unfocused 1 textarea

textarea {
   position: absolute;
   height: 50px;
   width: 400px;
   transition: all 200ms;
}

And finally the focused one

textarea:focus {
   z-index: 1001;
   min-height:250px;
}

Fiddle: http://jsfiddle.net/7v60su9e/

Source: stackoverflow.com

[ACCEPTED]-how to expand a text area when click on-css

How to detect which one of the defined font was used in a web page?

Google Maps API v3: InfoWindow not sizing correctly

How do you make something to appear slowly on a page using Javascript?

how can i put an image into select?

Possible to make jqGrid stretch to 100%?

Don't load hidden images

Dynamically change onmouseover or onmouseout to call a different function

How can I show an element that has display: none in a CSS rule?

Sidebar that follows scroll, but scrolls self, if taller than viewport

Enable/Disable Input based on selection (jQuery)