Como se o texto selecionado do controle textbox com javascript
-
07-07-2019 - |
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?
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
HTMLTextAreaElement.prototype.getSelection = HTMLInputElement.prototype.getSelection = function() {
var ss = this.selectionStart;
var se = this.selectionEnd;
if (typeof ss === "number" && typeof se === "number") {
return this.value.substring(this.selectionStart, this.selectionEnd);
}
return "";
};
Então, você tinha acabado de fazer:
alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());
por exemplo.
Fan grande de jQuery-TextRange
Abaixo está uma muito pequena, auto-suficiente, exemplo. carga para baixo jquery-textrange.js e copiar para a mesma pasta.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>
<script>
/* run on document load **/
$(document).ready(function() {
/* run on any change of 'textarea' **/
$('#textareaId').bind('updateInfo keyup mousedown mousemove mouseup', function() {
/* The magic is on this line **/
var range = $(this).textrange();
/* Stuff into selectedId. I wanted to store this is a input field so it can be submitted in a form. **/
$('#selectedId').val(range.text);
});
});
</script>
</head>
<body>
The smallest example possible using
<a href="https://github.com/dwieeb/jquery-textrange">
jquery-textrange
</a><br/>
<textarea id="textareaId" >Some random content.</textarea><br/>
<input type="text" id="selectedId" ></input>
</body>
</html>