Como se o texto selecionado do controle textbox com javascript

StackOverflow https://stackoverflow.com/questions/275761

Pergunta

Eu tenho uma caixa de texto e um botão de link. Quando eu escrever algum texto, em seguida, selecione alguns deles e, em seguida, clique no botão link, o texto selecionado de caixa de texto deve ser show com um messagebox.

Como posso fazê-lo?

Quando clico no botão enviar para caixa de texto abaixo, caixa de mensagem deve mostrar Lorem ipsum. Porque "Lorem ipsum" é selecionado na área.

Se eu selecionar qualquer texto a partir da página e clique no botão enviar ele está trabalhando, mas se eu escrever um texto a caixa de texto e torná-lo, não é. Porque quando eu clico para outro espaço, seleção de caixa de texto é cancelada.

Agora problema é que, quando eu selecionar um texto da caixa de texto e clique em qualquer outro controle ou o espaço, texto que é selecionado é ainda deve ser selecionada.

Como é ser feito?

Foi útil?

Solução

OK, aqui está o código que eu tenho: 

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  {// Standards Compliant Version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

O problema, embora o código eu dou para o IE é dado em muitos locais, não posso fazê-lo funcionar no meu cópia do IE6 no meu sistema atual. Talvez ele vai trabalhar para você, é por isso que eu dar-lhe.
O truque que você procurar é provavelmente a chamada .focus (), para dar a volta à textarea o foco para que a seleção é re-ativado.

[UPDATE] Eu tenho o resultado certo (o conteúdo selecção) com evento onKeyDown: 

document.onkeydown = function (e) { ShowSelection(); }

Assim, o código está correto. Mais uma vez, a questão é fazer com que a seleção com um clique em um botão ... Eu continuar a busca.

[UPDATE] Eu não tenho sucesso com um botão desenhado com uma tag li, porque quando clicar sobre ele, IE desmarca a seleção anterior. O código acima funciona com um simples botão input, embora ...

Outras dicas

Aqui está uma solução muito mais simples, baseado no fato de que a seleção de texto ocorre em mouseup, por isso adicionar um ouvinte de eventos para isso: 

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

Isso funciona em todos os navegadores.

Se você também quiser lidar com seleção através do teclado, adicionar outro ouvinte de evento para keyup, com o mesmo código.

Se não fosse por este Firefox bug arquivado volta em 2001 (sim, há 14 anos), que poderia substituir o valor atribuído à window.mySelection com window.getSelection().toString(), que funciona no IE9 + e todos os navegadores modernos, e também recebe a seleção feita em partes não-textarea do DOM. 

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

Para Opera, Firefox e Safari, você pode usar a seguinte função: 

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

Então, você apenas passar uma referência a um elemento de campo de texto (como um elemento textarea ou entrada) para a função: 

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

Ou, se você quiser