1

No Twitter ou Facebook, quando vamos digitar uma hashtag o fundo do texto vai ficando azul, como na imagem abaixo

hashtag

Eu estou tentando fazer isso em js usando o .keyup() em uma div[contenteditable=true], estou fazendo com o PHP passando o texto por jQuery e retornando o texto caso haja @ e adicionando uma class e um span. Funciona, mas sempre ele retorna o texto a cursor text que fica na div[contenteditable=true] ele sempre volta pro inicio (lado esquerdo) da DIV e quando boto no começo o texto (lado direito) edita mas volta pro começo o cursor (lado esquerdo) de novo.

Sei que pode haver outro método mais já pesquei é não achei nada parecido.

Código jQuery:

$(document).ready(function(){
        $("#text_publica").keyup(function(){
            var text = $("#text_publica").text();
            var dataString = 'nome='+text;
            $.ajax({
                type: 'post',
                url: 'pages/validate_nm.php',
                data: dataString,
                cache: false,
                success: function(data){
                    $("#text_publica").html(data);
                    $("#text_publica").focus();
                }
            });
        });
    });

Código PHP:

<?php
    session_start();
    include('main_bd.php');
    include 'data.class.php';


    if(isset($_POST['nome'])){
        $txt = $_POST['nome'];
        $txt = preg_replace('/\B@([\d\w_]+)/i', '<span class="tag">$0</span>', $txt);
        echo $txt;
    }
?>

Me veio um interesse em fazer isso tive essa ideia em fazer com jQuery + PHP não sou um expert nessa área de js mais me viro quando é preciso. Nesse caso preciso da ajuda de vocês, se souberem fazer de outro jeito ou fazer que o cursor text sempre fique a frente da ultima caractere logo no final do texto já é um começo.

0

1 Resposta 1

1

Você terá que memorizar a posição do começo da seleção no texto, depois modificar o HTML e depois mover a carreta de seleção do texto para a velha posição.

Para obter a posição da carreta vai ser necessária a propriedade selectionStart no elemento (não existe no IE <= 8). Se querer usar jQuery será necessário de um add-on.

Veja o exemplo da resposta aceita aqui para mudar a posição da carreta (poderá não funcionar em navegadores antigos).

Também, seria mais rápido você procurar a indíce do caractere "@" e ir percorrendo todos caracteres na frente dele até achar um espaço ou até chegar ao fim do texto, depois memorizar a indíce do fim da hashtag em uma variável, então só mandar para o servidor o que a hashtag contém, ou nada caso não exista.

(Seria simples um String.prototype.substring, mas seria incompleto por causa dos diversos tipos de espaceamento.)

Exemplo:

/* Essa é a função para definir a posição do carret da resposta mencionada acima */
function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if(elem !== null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }else{
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            } else elem.focus();
        }
    }
}

var text = $("#text_publica").text();

function searchHashtag() {
    var hashtagIndex = text.indexOf('@');
    if(hashtagIndex >= 0) {
        // Procura a indíce do final da hashtag;
        // O fim acontece quando é encontrado um tipo de espaço ou quebra de linha.
        for(var i = 0, charCode; charCode = text.charCodeAt(i) && charCode !== 9 && charCode !== 10 && charCode !== 13 && charCode !== 32; i ++);
        return {
            start: hashtagIndex,
            end: i + 1
        };
    }else{
        return {};
    }
}

var hashtagPos = searchHashtag();
if(hashtagPos.start) {
    var hashtagSub = text.substring(hashtagPos.start + 1, hashtagPos.end);
    // Envia os digitos da hashtag ao servidor
    $.ajax({
        cache: false,
        data: {
            "nome": hashtagSub
        },
        success: function(data){
            var $text = $("#text_publica");
            $text.html(data);
            $text.focus();
            var carretPos = $text[0].selectionStart;
            // Volta à posição anterior no texto
            setCaretPosition("text_publica", carretPos);
        },
        type: 'POST',
        url: 'pages/validate_nm.php'
    });
}

Aí você teria que atualizar o código PHP para ficar assim:

if(isset($_POST['nome'])){
    $txt = '<span class="tag">' . $_POST['nome'] . '</span>';
    echo $txt;
}
3
  • Bom @klaiderklai, está dando deu error no SetCaretPosition: setCaretPosition is not defined, e outra quando começo digitando com (arroba)blabla com demais textos nada acontece, quando como normal ex: Oi (arroba)hey, o texto apaga todo, ele adiciona o <span class="tag"></span> só que vazio e da o erro do SetCaretPosition, tentei resolver só mais não mt bom em js como citei no tópico. Uso o Google Chrome. 11/07/2016 às 19:56
  • @GleysonAbreu Ei, você precisa copiar a função setCaretPosition da resposta (eu mencionei) na outra pergunta. Atualizarei.
    – user37626
    11/07/2016 às 20:11
  • Esse do setCaret foi resolvido, como falei, quando começo com (Arroba)gleyson ele não ponhe o span com a class tag, já quando começo com: oi (Arroba)kk, vai mais ou menos o primeiro "defeito" que ele apaga o texto todo, segundo "defeito" é que você tem que ser bem rápido digando pois no momento que você ponhe o @ ele ja passa a span ea class sem nada, você tem que aperta ex: @a simultaneamente, é outra e para por essas funções dentro da $("#text_publica").keyup(function(){.....});, Obrigado desde já. 11/07/2016 às 20:55

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 .