Question

我有以下代码，以便在您单击时最大化文本区域。当我单击textarea时，如何将其恢复为原始大小？

$('textarea').focus(function () {
    $(this).animate({ height: "300px" }, 500);
});

Answer 1

focus事件对是blur（https://api.jquery.com/blur/），因此您需要调整模糊大小：

$('textarea').blur(function () {
    $(this).animate({ height: "XXXpx" }, 500);
});

编辑：但您可能想要使用仅限CSS的解决方案：

textarea {
  height:200px;
}
textarea:focus {
  height:300px;
}

此外，您还可以使用一些CSS动画技术直观地增强过渡。

Answer 2

$('textarea').onblur = function() {
  if(this.value === this.defaultValue) {
  this.style.height = '';
}

Answer 3

使用focusout

描述：将事件处理程序绑定到＆＃34; focusout＆＃34; JavaScript事件。

＆＃13;

$('textarea').focus(function() {
  $(this).animate({
    height: "300px"
  }, 500);
});

$('textarea').focusout(function() {
 $(this).animate({
    height: "100px"
  }, 500);
})

＆＃13;

textarea {
  height: 100px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

＆＃13;

Answer 4

使用blur事件并使用initial设置身高

$('textarea').focus(function () {
    $(this).animate({ height: "300px" }, 500);
}).blur(function(){
    $(this).animate({ height: "initial" }, 500);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea>sss</textarea>

Answer 5

您可以使用解决方案https://jsfiddle.net/k3aztqof/1/

＆＃13;

$('textarea').focus(function () {
    $(this).animate({ height: "300px" }, 500);
}).focusout(function () {
    $(this).animate({ height: "100px" }, 500);
});

＆＃13;

textarea{
  width: 500px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

＆＃13;

Answer 6

您可以使用jquery focusin()和focusout()方法来增加和减小尺寸：

//increase size on focus in
$('textarea').focusin(function () {
    $(this).animate({ height: "300px" }, 500);
});

//decrease size on focus out    
$('textarea').focusout(function () {
    $(this).animate({ height: "initial" }, 500);
});

Answer 7

<script>
var org_height = $('textarea').height();

$('textarea').focus(function () {
    $(this).animate({ height: "500px" }, 500);
});

$('textarea').focusout(function() {
    $(this).animate({ height: org_height }, 500);
});

</script>

单击if时如何最小化textarea

7 个答案: