jQuery - Textbereich bei Klick vergrößern; Verringern nach, wenn nicht Text; - Jquery

Ich versuche folgendes zu tun:

• Textarea original haben 60px Höhe;
• Klicken Sie im Textfeld auf die Größe Folien auf 150px;
• Wenn der Benutzer Text in ... eingibt, wenn er den Textbereich verlässt, behalte den 150px;
• Wenn der Benutzer keinen Text eingibt ... und den Textbereich verlässt, wird er wieder auf 60px verschoben;

Irgendein Vorschlag?

Antworten:

Sie können zuhören focus und blur Veranstaltungen:

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>

Wenn das Textfeld ursprünglich leer ist und Sie möchten, dass es auf die ursprüngliche Größe zurückkehrt, wenn der Benutzer nur Leerzeichen eingegeben hat, in der if Aussage, die Sie überprüfen können

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");
}
});

Versuche dies:

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

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