如何在點擊時儘量減少文本區域

Question

我有以下代碼可以在單擊文本區域時最大化文本區域。當我點擊textarea時，如何將其恢復爲原始大小？

$('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

說明：綁定的事件處理程序 「事件的內容」 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

您可以用戶的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>