如何通过改变div区域使textarea弹性

Question

当使用jquery使用textarea弹性时我有问题，问题是当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>

这是我的ui输出：

输出只是使textarea变为down，但div高度没有变化。我的预期就像是文本区域whatsapp web当你按shift +输入textboard区域将是我想要的。

谢谢

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

以下是您想要的输出示例。您可以使用以下代码调整textarea的大小：

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;
}

希望你能理解这一点。