5

Eu tenho a seguinte estrutura:

<pre id="editor" contenteditable="true">
“Always pass on what you have learned.” - Yoda

> {|}

--
X    
</pre>

Eu quero que quando alguém clique em um botão eu coloque o cursor no lugar de {|}. Esse texto {|} realmente existe no meu elemento, eu posso substituí-lo por um elemento html se necessário.

Como posso definir a posição do cursor, para que quando começar a digitar meu texto apareça ali naquela posição?

1

2 Respostas 2

5

Você precisa usar os objectos Range e Selection para obter um intervalo selecionado dentro do elemento:

// marca lugar para posicionar o cursor em `editor`
var marker = '{|}';

// cria intervalo
var range = document.createRange();
var index = editor.innerText ? editor.innerText.indexOf(marker) : editor.textContent.indexOf(marker);
range.setStart(editor.childNodes[0], index);
range.setEnd(editor.childNodes[0], index + marker.length);

// faz seleção
var selection = window.getSelection();
selection.addRange(range);

editor.focus();

Fiddle aqui.

3
  • 1
    Em Linux com Firefox 25.0, nenhuma das soluções coloca o cursor na posição indicada para iniciar a escrita. Podes indicar que navegadores suportam esta solução?
    – Zuul
    25/12/2013 às 10:14
  • Alterei o código para usar textContent quando innerText não estiver disponível e focar no editor. Funciona no Firefox 23 para Windows. Mas, como mencionado por @utluiz, você deve adaptar o código se a div contém outros elementos (adaptando childNodes[0]).
    – Jordão
    25/12/2013 às 15:17
  • ... também funciona no Firefox 26 para Windows.
    – Jordão
    25/12/2013 às 15:21
2

Como o Jordão já respondeu, com uma boa resposta por sinal, é possível localizar o texto dentro do editor.

No entanto, usar o childNodes[0] não vai funcionar caso haja tags html dentro do editor que englobem o marcador do cursor. Veja um exemplo neste jsfiddle, cujo HTML é:

<pre id="editor" contenteditable="true">
“Always pass on what you have learned.” - Yoda
<div>
> {|}
</div>

--
X    
</pre>

Preparei uma versão usando uma tag HTML com um id especial que evita esse problema e ainda permite posicionar o cursor sem precisar de um elemento visual.

O código ficou assim:

function setCursor(node, cursorElement) {
    var range = document.createRange();
    range.setStart(cursorElement, 0);
    range.collapse(true);
    if (window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        node.focus();
    } else if (document.selection && range.select) {
        range.select();
    }
}

var editor = document.querySelector("#editor");
var button = document.querySelector("button");

button.addEventListener("click", function(e) {
    setTimeout(function () {
        setCursor(editor, document.querySelector("#cur"));
    }, 200);
}, false);

O marcador é uma tag span, como no trecho abaixo:

<pre id="editor" contenteditable="true">
“Always pass on what you have learned.” - Yoda

> <span id="cur"/>

--
X    
</pre>

Veja o Jsfiddle.

4
  • Em Linux com Firefox 25.0, nenhuma das soluções coloca o cursor na posição indicada para iniciar a escrita. Podes indicar que navegadores suportam esta solução?
    – Zuul
    25/12/2013 às 10:13
  • +1 Sim! Se a div em questão tiver outros elementos, childNodes[0] deverá ser adaptado.
    – Jordão
    25/12/2013 às 15:19
  • @Zuul No firefox precisa de um node.focus(). Atualizei a resposta. Havia testado no Chrome e no IE 9. :(
    – utluiz
    26/12/2013 às 10:39
  • @utluiz Oi! Estou tendo problemas relacionados a essa pergunta, contudo estou com receio de criar outra. Veja, eu possuo a posição númerica em que o cursor deverá ficar, contudo dentro dessa div editável existem tags como <img> que são emojis e que devem ser considerados caracteres igualmente. Meu código não as considera caracter, veja: jsfiddle.net/3uvn0mqv 14/02/2018 às 0:49

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 .