1

O que ocorre é o seguinte:

Eu estou tentando inserir um emoticon nesta textarea

<textarea name="mensagem" cols="90" rows="10" placeholder="digite o texto ou cole HTML">[8)]</textarea>

Os emoticons ficam numa barra que insere quando a extensão carrega. assim um do lado do outro [] [] [] [] . Até aqui tudo bem;

O PROBLEMA: Quando clico em um emoticon, ele é inserido na textarea sem maiores problemas, mas se eu clicar na textarea digitar um texto, seja ao lado do emoticon, em baixo ou qualquer lugar, e depois clico pra inserir mais um emoticon, ele simplesmente não insere mais nenhum.

Exemplo:

Cliquei e inseri o emoticon > 'Texto que estou digitando' > Agora, quando vou clicar novamente pra botar mais um emoticon, ele não entra na textarea. Simplesmente, só fica o primeiro emoticon, e o texto que digitei.

CÓDIGO JAVASCRIPT:

window.onload = function teste() {
    var salvo = document.querySelector('textarea').onfocus;
    add = document.getElementsByTagName("td")[2].innerHTML = '<a href=javascript:void(0); onclick=a=document.querySelector("textarea").innerHTML="[:(]"><img src="http://app.e-orkut.com/assets/images/emoticons/2.gif"> '
    + '<a href=javascript:void(0); onclick=a=document.querySelector("textarea").innerHTML="[8)]"><img src="http://app.e-orkut.com/assets/images/emoticons/1.gif"></a>' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/3.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/4.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/5.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/6.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/7.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/8.gif">' 
    + '<img src="http://app.e-orkut.com/assets/images/emoticons/9.gif">';
}

1 Resposta 1

2

O teu problema é que estás a usar .innerHTML quando devias estar a usar .value para mudar o conteúdo dessa <textarea>.

Dito isto, como eu acho que devias fazer isso é assim:

function addMe(emoticon, target) {
    return function() {
        target.value += emoticon;
    }
}

window.onload = function() {
    var url = ['http://app.e-orkut.com/assets/images/emoticons/', '.gif'];
    var emoticons = ['[:(]', '[8)]', '[>:(]', '[:)]', '[;)]', '[:D]', '[:o]', '[:p]', '[:)]'];
    var textarea = document.querySelector('textarea');
    var emoticonsElement = document.getElementsByTagName("div")[0];
    for (var i = 0; i < emoticons.length; i++) {
        var img = document.createElement('img');
        img.src = url.join(i + 1);
        emoticonsElement.appendChild(img);
        img.addEventListener('click', addMe(emoticons[i], textarea));
    }
}

Exemplo: https://jsfiddle.net/st4met3d/

Dessa maneira sabes sempre qual o elemento que tem qual emoticon, o código fica mais organizado e não tens HTML espalhado no meio do JavaScript...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .