將Emojis發送到我的文本區域

Question

當用戶點擊時，如何將emojis發送到文本區域？ 我創建了一個按下按鈕並在用戶點擊按鈕時顯示所有表情符號的按鈕，但是當用戶點擊表情符號時，如何將它們發送到文本區域？

home.php：

<a href="#">
<div class="dropdown" id="div1">
 <button onclick="myFunction()" class="dropbtn">Add emojis</button>
 <ul id="myDropdown" class="dropdown-content">

<img src="emojis\1f602.png" style="width:28px;height:28px;" />
<img src="emojis\1f603.png" style="width:28px;height:28px;" />

</ul>
</div>
</a>

Answer 1

您需要為此目的使用內容可編輯div。

<div contenteditable="true" placeholder="text status" id="content"></div>

<a href="#">
    <div class="dropdown" id="images">
        <button onclick="myFunction()" class="dropbtn">Add emojis</button>  <ul id="myDropdown" class="dropdown-content">

            <li><img src="image1.jpg" style="width:28px;height:28px;" /></li>
            <li><img src="image2.jpg" style="width:28px;height:28px;" /></li>

        </ul>
    </div>
</a>

<script src="https://code.jquery.com/jquery-1.x-git.min.js"></script>

<script type="text/javascript" charset="utf-8">
    jQuery('img').click(function(){ jQuery('#content').append('<img src="'+jQuery(this).attr('src')+'" width="10%"/>'); });
</script>

CSS

#content {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid black;
    box-shadow: 1px 1px 1px 0 black inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;
    max-height: 100px;
    min-height: 100px;
    overflow: auto;
}