javascript - 如何使用Javascript在textarea内添加按钮?

原文 标签 javascript jquery html css

我的客户希望我在里面创建一个文本区域,其中必须有一个如下图所示的按钮:
This is sample
进入上图,请按照图片右侧的位置,您可以看到蓝色的括号是按钮。
这必须像第二张图片一样点击(如下拉):
enter image description here
在第二张图片中,我们可以看到,单击大括号按钮后,列表已打开,单击列表中的一个选项正在 Textarea 上写入。但是这整个事情应该在客户端工作,即使用我很新的 Javascript 或 Jquery。所以,我无法开始。我需要您对上述有关如何实现以下目标的明智建议,同时我也在做我的研究,如果我知道任何事情,那么我会更新我的问题或回答我的问题。提前致谢。

最佳答案

为此,您可以将 textarea 和按钮放在具有 position: relative 的同一个 div 中。设置它。然后您可以制作按钮 position: absolute并将其放在右上 Angular 。像这样的东西:

.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>


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

关于javascript - 如何使用Javascript在textarea内添加按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40951899/

相关文章:

javascript - 如何将 $templateCache.put(...) 的内容放入 html 文件而不是将 Html 嵌入 Javascript?

javascript - 如何将 jQuery ToggleClass 和 if/else 代码重写为 vanilla JS?

javascript - 点击事件时激活脚本

jquery - 花式框中的 Jscrollpane 不起作用

javascript - 在将<tr>文本加载到数组元素中时遇到问题

javascript - 实现流体 JS 平铺界面

javascript - 删除元素时遍历数组

javascript - 在 React 中,构造函数(props)中设置的值可以被覆盖吗?如果没有,如何设置可写默认值?

javascript - RXJS 可观察枚举类型,类型 'Observable<Type>' 不可分配给类型 'Type'

html - div中的元素崩溃太早