Question

问题
我有一个注释textarea，由于Jack Moores npm软件包https://www.jacklmoore.com/autosize/，我使文本响应迅速。现在，一切正常，但我的div通常为bottom：75px;当textarea自动调整大小时，它将更新textarea的高度。这是发生问题的地方，例如，我还要更新该div的底部，以防止它遍历textarea。

HTML

<form action="#">
            <textarea
              type="text"
              id="text"
              spellcheck="false"
              placeholder="Type message..."
              maxlength="50"            
            ></textarea>
          </form>
          <div class="three_dots_messages" onclick="toggleMessagesSettings()"></div>
          <div class="three_dots_messages_menu">
            <div class="three_dots_messages_menu_buttons">
              <div class="send_tip_button all_message_buttons" >
                <span>Send tip</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="7.886" height="15" viewBox="0 0 7.886 15"  style="margin: 2px 0 0 2px ;">
                  <path id="Icon_awesome-dollar-sign" data-name="Icon awesome-dollar-sign" class="cls-1" d="M5.731,6.838,2.773,5.912a.861.861,0,0,1-.581-.829A.837.837,0,0,1,3,4.219H4.817a1.6,1.6,0,0,1,.937.308.406.406,0,0,0,.534-.059l.953-1a.5.5,0,0,0-.049-.718,3.716,3.716,0,0,0-2.369-.879V.469A.456.456,0,0,0,4.384,0H3.507a.456.456,0,0,0-.438.469V1.875H3a3.133,3.133,0,0,0-2.985,3.5,3.293,3.293,0,0,0,2.3,2.83l2.807.879a.864.864,0,0,1,.581.829.837.837,0,0,1-.808.864H3.075a1.6,1.6,0,0,1-.937-.308.406.406,0,0,0-.534.059l-.953,1a.5.5,0,0,0,.049.718,3.716,3.716,0,0,0,2.369.879v1.406A.456.456,0,0,0,3.507,15h.876a.456.456,0,0,0,.438-.469V13.119a3.108,3.108,0,0,0,2.9-2.13A3.264,3.264,0,0,0,5.731,6.838Z" transform="translate(-0.003)"/>
                </svg>
              </div>
              <div class="chat_rules_button all_message_buttons" >
                <span>Chat rules</span> 
                <svg xmlns="http://www.w3.org/2000/svg" width="13.125" height="15" viewBox="0 0 13.125 15">
                  <path id="Icon_awesome-book-dead" data-name="Icon awesome-book-dead" class="cls-1" d="M7.969,3.984A.469.469,0,1,0,7.5,3.516.47.47,0,0,0,7.969,3.984ZM13.125,10.5V.75a.69.69,0,0,0-.75-.75H2.813A2.762,2.762,0,0,0,0,2.813v9.375A2.762,2.762,0,0,0,2.813,15h9.563a.739.739,0,0,0,.75-.75v-.469a.81.81,0,0,0-.281-.562,8.292,8.292,0,0,1,0-2.156.567.567,0,0,0,.281-.562ZM7.031,1.641A2.15,2.15,0,0,1,9.375,3.516a1.778,1.778,0,0,1-.937,1.491v.384a.47.47,0,0,1-.469.469H6.094a.47.47,0,0,1-.469-.469V5.007a1.778,1.778,0,0,1-.937-1.491A2.15,2.15,0,0,1,7.031,1.641Zm-3.375,4.9.185-.431a.233.233,0,0,1,.308-.123l2.88,1.233L9.911,5.988a.233.233,0,0,1,.308.123l.185.431a.233.233,0,0,1-.123.308l-2.06.885,2.06.882a.233.233,0,0,1,.123.308l-.185.431a.233.233,0,0,1-.308.123L7.031,8.244,4.151,9.48a.233.233,0,0,1-.308-.123l-.185-.431a.233.233,0,0,1,.123-.308l2.063-.882L3.779,6.85a.233.233,0,0,1-.123-.308Zm7.5,6.583H2.813a.886.886,0,0,1-.937-.937.939.939,0,0,1,.938-.937h8.344ZM6.094,3.984a.469.469,0,1,0-.469-.469A.47.47,0,0,0,6.094,3.984Z"/>
                </svg>              
              </div>
              <div class="muted_users all_message_buttons" >
                <span>Muted users</span> 
                <svg xmlns="http://www.w3.org/2000/svg" width="16.071" height="15" viewBox="0 0 16.071 15">
                  <path id="Icon_metro-volume-mute2" data-name="Icon metro-volume-mute2" class="cls-1" d="M18.642,13.15V14.57H17.222l-1.794-1.794L13.634,14.57H12.214V13.15l1.794-1.794L12.214,9.562V8.142h1.421l1.794,1.794,1.794-1.794h1.421V9.562l-1.794,1.794ZM9.535,18.856a.535.535,0,0,1-.379-.157L5.027,14.57H3.106a.536.536,0,0,1-.536-.536V8.677a.536.536,0,0,1,.536-.536H5.027L9.156,4.013a.536.536,0,0,1,.915.379V18.32a.536.536,0,0,1-.536.536Z" transform="translate(-2.571 -3.856)"/>
                </svg>

              </div>
              <div class="close_chat_button all_message_buttons" onclick="toggleMessagesSettings(), toggleMessages() ">
                 <span>Close chat</span> 
                 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
                  <path id="Icon_material-close" data-name="Icon material-close" class="cls-1" d="M22.5,9.011,20.989,7.5,15,13.489,9.011,7.5,7.5,9.011,13.489,15,7.5,20.989,9.011,22.5,15,16.511,20.989,22.5,22.5,20.989,16.511,15Z" transform="translate(-7.5 -7.5)"/>
                </svg>            
              </div>
            </div>
          </div>

CSS

    .three_dots_messages_menu {
  position: fixed;
  width: 15%;
  height: 130px;
  min-width: 232px;
  bottom: -250px;
  background-color: #363636;
  border-radius: 5px;
  opacity: 0;
  transition: 0.3s;
}
    #text {
  border: 1px solid #d4af37;
  background-color: #343333;
  position: fixed;
  bottom: 15px;
  margin: 0 auto;
  font-size: 17px;
  width: 13%;
  padding: 12px 30px 5px 10px;
  color: white;
  border-radius: 5px;
  min-width: 190px;
  min-height: 33px;
  height: 33px;
  max-height: 100px;
  outline: none;
  resize: none;
}

一些信息和问题

我需要保持绝对的位置，而不仅仅是用边距解决此问题。
我知道我可以通过修改autosize的js来做到这一点，但是老实说不够熟练，无法完全理解正在发生的一切上。
是否有可能操纵DOM的方法，这样我就可以使该textarea的div子级了？
您知道简单的js修补程序吗？
用于自动调整大小的JS太大，您可以从网站上查看它

Answer 1

最好将菜单移动到文本区域之前的某个位置并删除其固定位置，以便它自动保留在原处。

如果要动态调整它，“自动调整大小”会触发一个事件，您可以在其中挂钩一些代码以更新其位置。

 select sales, t_001 as product_code
 from "project_01.sales_001.trans_datamart"
 where t_001 = '001-40040-00'               --<--- Modification here.

使div跟随自动调整文本区域的大小？

1 个答案: