如何使用Javascript在textarea中添加按钮？ [英] How to add button inside textarea using Javascript?

问题描述

我的客户希望我在里面创建一个textarea，如下图所示：

My client wants me to create a textarea inside where there has to be a button like the below picture:

在上面的图片中，请按照图片的右侧，您可以看到蓝色支架，即按钮。

Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.

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

This has to be work like this 2nd picture on-click (like drop down):

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

Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.

推荐答案

为实现此目的，您可以将textarea和按钮放在具有<$ c $的同一div中c>位置：相对设置。然后，您可以按按钮位置：绝对并将其放在右上角。这样的事情：

To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:

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

我会根据需要为你留下造型。

I'll leave the styling for you to finalise as required.

这篇关于如何使用Javascript在textarea中添加按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！