如何通过更改 div 区域使 textarea 具有弹性

Question

我在使用 jquery 使用 textarea elastic 时遇到问题，问题是当 textarea 高度改变时我无法改变 div 高度。

我已经尝试使用这个 jquery 插件：http://bensampaio.github.io/jquery.autogrow/

这是我的 index.html ：

            <div class="col-8" style="padding: 0;">
                <div class="right-chat-header">
                    <div class="row">
                        <div class="col-2 chat-item-img" style="padding-left: 45px; padding-right: 0;">
                            <img class="chat-img" src="./assets/services-2.png">
                        </div>
                        <div class="col-1" style="padding: 0;">
                                <div class="notification-status online">&nbsp;</div>
                        </div>
                        <div class="col-7 chat-item-text" style="padding: 10px 0;">
                            <div class="profile-name ">
                                <span>John</span>
                            </div>
                            <div class="d-flex profile-status">
                                <span class="profile-online">Online</span>
                                <span class="profile-off" style="display: none;">Not Available</span>
                            </div>
                        </div>
                        <div id="hide" class="col-2 mt-3">
                            <button class="circle-button color-minimize"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                </div>
                <div class="chat-area scrollbar-macosx" style="position: relative;">
                    <div>
                        <div class="container mt-2">
                            <!-- Receiver chat -->
                            <div class="d-flex justify-content-end mt-3">
                                <div class="chat-content-image">
                                    <div class="upload-image">
                                        <div class="time-image">
                                            <span class="time-item">14:10</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Sender chat -->
                            <div class="d-flex justify-content-start mt-3">
                                <div class="chat-context">
                                    <div class="chat-text">
                                        <p>test/p>
                                    </div>
                                    <div class="chat-time">
                                        <p>14:15</p>
                                    </div>
                                </div>
                            </div>
                            <!-- Receiver Chat -->
                            <div class="d-flex justify-content-end mt-3 mb-4">
                                <div class="chat-context">
                                    <div class="chat-text">
                                        <p>ok</p>
                                    </div>
                                    <div class="chat-time">
                                        <p>15:00</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-keyboard d-flex">
                            <div class="col-2" style="padding-right: 5px; margin-top: 40px;">
                                    <button type="button" onclick="chooseFile();" class="circle-button color-plus">
                                        <i class="fa fa-plus"></i>
                                    </button>
                            </div>
                            <div class="col-8 mt-2" style="padding-left: 0px;">
                                <textarea placeholder="type here..." rows="3" class="keyboards mt-2">

                                </textarea>
                            </div>
                            <div class="col-2" style="margin-top: 30px;">
                            <button class="send-button"><img src="./assets/Send.png" width="70%"></button>
                            </div>
                </div>
            </div>

这是我的用户界面输出：

输出只是让textarea变成了down，但div的高度没有改变。当您按下 shift+enter 文本板区域时，我的预期就像文本板区域 whatsapp web 将是我想要的。

谢谢

Answer 1

您可以使用带有 ':focus' 属性和 'max-height' 的纯 css，或者当用户在输入字段内单击时添加一个类。

textarea {
    max-height: 80px;
    transition: max-height 1s ease; // if you want it animated
}

textarea:focus {
    max-height: unset;
}

Answer 2

这是您想要的输出示例。 您可以借助以下代码调整文本区域的大小：

html：

<body>
<div>
  <p>user resize both the height and the width of the div element.</p>
  <p>To resize: Click and drag the bottom right corner of the div element.</p>
</div>
</body>

CSS：

div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}

希望你能理解。