Question

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

Textarea原件高度为60px;
在textarea上点击尺寸幻灯片到150px;
如果用户在离开textarea时键入文本，请保留150px;
如果用户没有输入文字...并离开textarea，它会滑回60px;

有什么建议吗？

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

jQuery - 点击时增加textarea;如果不是文本则减少;

3 个答案: