如何在单击if时最小化文本区域

Question

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

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

Answer 1

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

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

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

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

Answer 2

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 3

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

Answer 4

1. 使用 focusout

说明：将事件处理程序绑定到"focusout"JavaScript 事件。

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

textarea {
height: 100px
}

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

Answer 5

处理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 6

您可以使用 jqueryfocusin()和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>