Yo he creado un Chat al cual le he puedo mis Smojis de esta manera. Lo primero es que he creado un archivo PHP a parte dentro de una carpeta llamada smojis
y allí he colocado la estructura del Dropdown
Estructura del Dropdown:
<!-- Dropdown Structure -->
<ul id='smojis' class='dropdown-content'>
<li><span id="s1">😀</span></li>
<li><span id="s2">🤣</span></li>
<li><span id="s3">😍</span></li>
<li><span id="s4">😘</span></li>
<li><span id="s5">😜</span></li>
<li><span id="s6">😎</span></li>
<li><span id="s7">😇</span></li>
<li><span id="s8">🤨</span></li>
<li><span id="s9">😷</span></li>
<li><span id="s10">🤬</span></li>
<li><span id="s11">😈</span></li>
<li><span id="s12">🤡</span></li>
<li><span id="s13">💩</span></li>
<li><span id="s14">🤑</span></li>
<li><span id="s15">😱</span></li>
<li><span id="s16">😭</span></li>
<li><span id="s17">😢</span></li>
<li><span id="s18">🤠</span></li>
<li><span id="s19">🎃</span></li>
<li><span id="s20">👍</span></li>
<li><span id="s21">👎</span></li>
<li><span id="s22">🤘</span></li>
<li><span id="s23">🖕</span></li>
<li><span id="s24">👋</span></li>
<li><span id="s25">🙏</span></li>
<li><span id="s26">👀</span></li>
<li><span id="s27">👮</span></li>
<li><span id="s28">👮♀️</span></li>
<li><span id="s29">👨💻</span></li>
<li><span id="s30">🕵️♂️</span></li>
</ul>
Luego cree un archivo JS donde desarrolle la logica para colocar el Smojis en el textarea con propiedad value
// Obtener el textarea
var textarea = document.getElementById('messege');
// Obtener los smojis en enlaces
var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');
var s3 = document.getElementById('s3');
var s4 = document.getElementById('s4');
var s5 = document.getElementById('s5');
var s6 = document.getElementById('s6');
var s7 = document.getElementById('s7');
var s8 = document.getElementById('s8');
var s9 = document.getElementById('s9');
var s10 = document.getElementById('s10');
var s11 = document.getElementById('s11');
var s12 = document.getElementById('s12');
// funcion para detectar el click
s1.addEventListener('click', () => {
textarea.value += "😀";
});
s2.addEventListener('click', () => {
textarea.value += "🤣";
});
s3.addEventListener('click', () => {
textarea.value += "😍";
});
s4.addEventListener('click', () => {
textarea.value += "😘";
});
s5.addEventListener('click', () => {
textarea.value += "😜";
});
s6.addEventListener('click', () => {
textarea.value += "😎";
});
s7.addEventListener('click', () => {
textarea.value += "😇";
});
s8.addEventListener('click', () => {
textarea.value += "🤨";
});
s9.addEventListener('click', () => {
textarea.value += "😷";
});
s10.addEventListener('click', () => {
textarea.value += "🤬";
});
s11.addEventListener('click', () => {
textarea.value += "😈";
});
s12.addEventListener('click', () => {
textarea.value += "🤡";
});
s13.addEventListener('click', () => {
textarea.value += "💩";
});
s14.addEventListener('click', () => {
textarea.value += "🤑";
});
s15.addEventListener('click', () => {
textarea.value += "😱";
});
s16.addEventListener('click', () => {
textarea.value += "😭";
});
s17.addEventListener('click', () => {
textarea.value += "😢";
});
s18.addEventListener('click', () => {
textarea.value += "🤠";
});
s19.addEventListener('click', () => {
textarea.value += "🎃";
});
s20.addEventListener('click', () => {
textarea.value += "👍";
});
s21.addEventListener('click', () => {
textarea.value += "👎";
});
s22.addEventListener('click', () => {
textarea.value += "🤘";
});
s23.addEventListener('click', () => {
textarea.value += "🖕";
});
s24.addEventListener('click', () => {
textarea.value += "👋";
});
s25.addEventListener('click', () => {
textarea.value += "🙏";
});
s26.addEventListener('click', () => {
textarea.value += "👀";
});
s27.addEventListener('click', () => {
textarea.value += "👮";
});
s28.addEventListener('click', () => {
textarea.value += "👮♀️";
});
s29.addEventListener('click', () => {
textarea.value += "👨💻";
});
s30.addEventListener('click', () => {
textarea.value += "🕵️♂️";
});
Para que sepas como funciona, a cada span de la lista desordenada le he colocado un id el cual será el identificador para el la logica JS obtener en una variable la información de ese span y luego crear una función que en ella lo que se esta haciendo es colocando dentro del textarea la información que contiene ese span
NOTA: por si no te diste cuenta en la parte de arriba tambien estoy obteniendo el textarea para poder colocar el valor del span dentro del textarea