扩大/缩小文本打字区域

Question

I am looking to have a comment field that will grow to show all text when the user clicks on it and then shrink back down (hiding the unshowable text) when the user clicks out of the text area. The user should be able to type in text and modify what they see.

I am assuming that textarea is the way to go since input doesn't have multi-line functionality. However, I am a little stuck on how to implement this. It seems everything out there just has the textarea resize to fit the text but not shrink back down after the user is done typing in it.

Could someone help me out/point me in the right direction?

Thanks!

Answer 1

You can use the :focus and :active states to change the textbox once the user clicks on it. Something like:

textarea{
 width: 200px;
 height: 200px;
 resize: none;
}

textarea:focus,
textarea:active{
  width: 400px;
  height: 400px;
}

Once the user clicks into the space, the text box will expand to the new dimensions. These work very similarly to :hover , if you're familiar with adding hover states.

Demo in a jsbin: http://jsbin.com/culil/1/

---

To add this stylings to you page you have two options.

1: You can include it as a css class in your site's stylesheet:

Css:

 .parentcontainer > textarea:focus, .parentcontainer > textarea:active { width: 400px; height: 400px; } 

This is a best practice because it separates the concerns of styling ( which should be CSS ) and adding interactivity ( which should be JavaScript).

2: You can add the class before you append the element using javascript:

css:

$(function(){
  var textarea = $(".parentDiv").append("<textarea></textarea>");
  $("textarea").addClass("my-textarea-class"); 
});

js:

 $(function(){ var textarea = $(".parentDiv").append("<textarea></textarea>"); $("textarea").addClass("my-textarea-class"); }); 

http://jsbin.com/buhado/1/edit