jquery - jQuery - 点击时增加文本区域；如果不是文字，则减少；

Question

我正在尝试执行以下操作：

• Textarea 原始高度为 60px；
• 在 textarea 上单击大小幻灯片到 150px；
• 如果用户在...中输入文本，离开文本区域时，保持 150px；
• 如果用户没有输入文本...并离开文本区域，它会滑回 60 像素；

有什么建议吗？

Answer 1

您可以收听focus和blur事件：

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>

如果 textarea 最初是空的，并且如果用户只输入了空格，您希望它恢复到原始大小，则if可以在语句中检查

this.value.trim() === ''

Answer 2

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

Answer 3

试试这个：

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

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