如何使用 Javascript 在 textarea 中添加按钮？答案

【问题标题】：How to add button inside textarea using Javascript?如何使用 Javascript 在 textarea 中添加按钮？
【发布时间】：2016-12-03 19:57:38
【问题描述】：

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

进入上图，请跟随进入图片右侧，可以看到蓝色大括号，即按钮。

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

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

【问题讨论】：

只需分别创建textarea和button，然后通过css（提示：绝对位置）定位到textarea中。关于按钮的下拉菜单，请尝试查看引导框架，它们有很好的组件；）。
没有办法将 HTML 放在 textarea 中，您必须在 textarea 之外创建按钮和列表，然后使用 CSS 放置。如果您不知道该怎么做，这应该很简单，也许您或您的客户应该尝试找一个知道怎么做的人，因为从头开始学习 CSS、HTML 和 javascript 需要一些时间。跨度>
为什么不像往常一样制作具有下拉功能的按钮，然后使用绝对位置将其放置在文本区域的“顶部”？
您的客户希望您创建 ...所以继续，学习所需的一切并编写代码！如果你不能，让你的客户知道，让他们有机会找到更有能力的人。
我将按照 Rory McCrossan 的建议进行尝试，也感谢大家的宝贵时间。

标签： javascript jquery html css

【解决方案1】：

要实现这一点，您可以将 textarea 和按钮放在同一个 div 中，该 div 上设置了position: relative。然后您可以制作按钮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>

我会把样式留给你根据需要完成。

【讨论】：

非常感谢您的回答，我会尝试并通知您。
这真的很有帮助。我已经测试过它的工作。再次感谢。

【解决方案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>

【讨论】：