I have an automatically expanding text-area. But when clicking send button, text-area is not going back to original height. I have included a sample code. In the project, its implemented using react. Is there any way to make text area height to "50px" when clicking send button? Thank you
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize() {
var el = this;
setTimeout(function() {
el.style.cssText = 'height:auto; padding:0';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
}, 0);
}.textarea {
overflow: hidden;
padding: 10px;
width: 250px;
font-size: 14px;
margin: 50px auto;
display: block;
border-radius: 10px;
border: 6px solid #556677;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid pl-5">
<div class="row w-70 text-center">
<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>
</div>
<button class="send-btn" onClick={()=> messageSendHandler()}>send</button>
</div>
</body>
</html>I don't see the messageSendHandler() function description attached to your post. Does it clear the textarea field? If so, when it happens, the keydown event does not occur, and thus the autosize() function is not triggered. So, I can see these 2 ways to choose from:
autosize() function on form submit as well, replace keydown event with input event — it is more universal and can help with different input types (such as dictation),messageSendHandler()), similarly to how you do it here:el.style.cssText = 'height:' + el.scrollHeight + 'px';
Also, alternatively, maybe this CSS-tricks URL can give you more inspiration on the topic.