1

Tengo un Dropdown con muchos Smojis, pero lo que quiero realizar es que cuando un usuario la haga click al smoji del Dropdown este automáticamente aparezca escrito en el textarea listo para ser enviado en el chat.

Tengo mi Dropdown y mi textarea solo quiero darle la funcionalidad antes mencionada.

Dropdown:

 <!-- Dropdown Structure -->
<ul id='emotico' class='dropdown-content'>
    <li><a href="#!">😀</a></li>
    <li><a href="#!">🤣</a></li>
    <li><a href="#!">😍</a></li>
    <li><a href="#!">😘</a></li>
    <li><a href="#!">😜</a></li>
    <li><a href="#!">😎</a></li>
    <li><a href="#!">😇</a></li>
    <li><a href="#!">🤨</a></li>
    <li><a href="#!">😷</a></li>
    <li><a href="#!">🤬</a></li>
    <li><a href="#!">😈</a></li>
    <li><a href="#!">🤡</a></li>
</ul>

Form y textarea:

<form class="col s12" method="POST" enctype="multipart/form-data">
<div class="row">
    <div class="input-field col s12">

        <!-- Smogis -->
        <i class="material-icons prefix dropdown-trigger" data-target='emotico'>insert_emoticon</i>

        <textarea id="messege" name="messege" class="materialize-textarea" required></textarea>
        <label for="messege">Escribe un mensaje...</label>

        <input type="hidden" id="receptor" value="<?=$receptor?>" />
        <div class="red-text" id="respuesta"></div>

        <!-- Boton de publicar -->
        <button class="btn waves-effect btn-color right" id="submit" type="button" name="public">Enviar
                <i class="material-icons left">near_me</i>
        </button>

        <span class="helper-text" data-error="wrong" data-success="right">

        <div class="file-field input-field">
            <span class="file-path-wrapper">
                <i class="material-icons prefix">photo_camera</i>
                <input id="photo" name="photo" type="file">
            </span>
        </div>

        </span>
    </div>
</div>

</form>

1 respuesta 1

1

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.