How to add button inside textarea using Javascript?



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

This is sample

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):

enter image description here

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.


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>

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

Answered By – Rory McCrossan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More