Wie füge ich Button in Textarea mit Javascript hinzu?

Question

Mein Kunde will, dass ich einen Textbereich schaffen im Inneren, wo es eine Schaltfläche wie das Bild unten zu sein hat:

In den oben pictue bitte in die rechte Seite des Bildes folgen, wo Sie blau sehen Farbe Klammern, die der Knopf ist.

Diese Arbeit wie dieses zweite Bild sein muss, auf Taste (wie Drop-Down):

in die 2. pictue wir, dass beim Klicken auf die Klammern, um die Liste geöffnet sehen und Wenn Sie auf eine Option in der Liste klicken, wird auf das Textfeld geschrieben. Aber diese ganze Sache sollte auf der Client-Seite funktionieren, d. H. Mit Javascript oder Jquery, in der ich ziemlich neu bin. Also konnte ich damit nicht anfangen. Ich brauche deinen weisen Vorschlag zu den obigen Ausführungen dazu, wie ich das Folgende erreichen kann, während ich auch meine Forschung mache, wenn ich etwas weiß, dann werde ich meine Frage aktualisieren oder meine Frage für andere beantworten. Danke im Voraus.

Answer 1

Um dies zu erreichen, können Sie sowohl den Textbereich als auch die Schaltfläche in demselben div platzieren, für das position: relative festgelegt ist. Sie können dann die Schaltfläche position: absolute und setzen Sie es oben rechts. Etwas wie folgt aus:

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

Ich werde das Styling für Sie hinterlassen, wie erforderlich ist, um abzuschließen.

Answer 2

Hier ist eine Version mehr oder weniger wie Sie gefragt, aber aufgrund der Tatsache, dass die Container-Div für das Menü außerhalb der Textarea platziert werden muss, gibt es nicht wirklich eine Möglichkeit für die dynamische Anpassung Die Texte verwenden nur CSS - also müssen Sie js verwenden.

* { 
 
    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>