如何使用Javascript在textarea内添加按钮？

Question

我的客户希望我在里面创建一个文本区域，其中必须有一个如下图所示的按钮：

进入上面的图片，请跟随图片的右侧，在那里您可以看到蓝色的括号，这是按钮。

这必须像第二张图片一样点击（如下拉）：

在第二张图片中，我们可以看到，单击大括号按钮后，列表已打开，单击列表中的一个选项正在 Textarea 上写入。但是这整个事情应该在客户端工作，即使用我很新的 Javascript 或 Jquery。所以，我无法从这个开始。我需要您对上述有关如何实现以下目标的明智建议，同时我也在做我的研究，如果我知道任何事情，那么我会更新我的问题或回答我的问题。提前致谢。

Answer 1

为了实现这一点，您可以将 textarea 和 button 放在已position: relative设置的同一个 div 中。然后，您可以制作按钮position: absolute并将其放在右上角。像这样的东西：

.textarea-container {
  position: relative;
}
.textarea-container textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.textarea-container button {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="textarea-container">
  <textarea name="foo">Some content here...</textarea>
  <button>Menu</button>
</div>

我会根据需要将样式留给您完成。

Answer 2

这是一个或多或少按照您要求的版本，但是，由于菜单的容器 div 必须放置在 之外textarea，因此实际上没有办法让它动态地适应textarea仅使用 CSS -因此你必须使用 JavaScript。

* {
  box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
  display: none;
}
#textarea_container {
  position: relative;
  display: inline-block;
}
#textarea_container label {
  background: blue;
  color: white;
  padding: .2em;
  position: absolute;
  top: 0;
  right: 0;
  padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
  position: absolute;
  top: 0;
  right: 0;
  overflow-y: scroll;
  max-height: 15em;
  min-height: 12em;
  min-width: 10em;
  border-left: 1.4em solid blue;
  z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
  display: block;
}
textarea {
  min-height: 15em;
    min-width: 40em;
}
#textareamenu:checked ~ label {
  position: absolute;
  right: 8.6em;
  top: 0;
  width: 1.4em;
  z-index: 100;
}

<div id="textarea_container">
    <textarea name="text"></textarea>
    <input type="checkbox" id="textareamenu">
    <label for="textareamenu">{}</label>
    <div id="textareamenu_content">
        <ul>
            <li>First_Name</li>
            <li>Last_Name</li>
        </ul>
    </div>
</div>