jQuery - Zvýšte textarea po kliknutí; Znížiť, ak nie text; - jquery

Snažím sa urobiť nasledovné:

• Originál Textarea má výšku 60px;
• Na textare kliknite na veľkosť snímky na 150px;
• Ak užívateľ zadá text ... pri opustení textarea, ponechajte 150px;
• Ak používateľ nevypíše text ... a opustí textarea, skĺzne späť na 60px;

Akýkoľvek náznak?

odpovede:

Môžete počúvať focus a blur diania:

var txt = document.getElementById("mytextarea");
txt.onfocus = function() {
this.style.height = "150px";
};
txt.onblur = function() {
if(this.value === this.defaultValue) {
this.style.height = "";
}
};

#mytextarea {
height: 60px;
}

<textarea id="mytextarea">Foo</textarea>

Ak je textárka pôvodne prázdna a chcete, aby sa vrátila na pôvodnú veľkosť, ak používateľ zadal iba medzery, v poli if vyhlásenie, ktoré môžete skontrolovať

this.value.trim() === ""

HTML:

<textarea style="height:60px;">
</textarea>

JavaScript:

$(document).on("click", "textarea", function(){
$(this).css("height", "150px");
});

$(document).on("focusout", "textarea", function(){
var inside=$(this).val().trim();

if (inside.length){
$(this).css("height", "150px");
}
else{
$(this).css("height", "60px");
}
});

Skúste to:

http://jsfiddle.net/UnTtR/3/

$(document).ready(function(){
$("#mytextarea").focus(function(){
$("#mytextarea").animate({"height":"150px"}, 1000);
});
$("#mytextarea").blur(function(){
$("#mytextarea").animate({"height":"60px"}, 1000);
});
});