我有一个文本框和一个链接按钮。当我写一些文本，然后选择其中的一些，然后单击链接按钮时，从文本框中选择的文本必须与消息框一起显示。
我该怎么做？
当我单击下面文本框的提交按钮时，消息框必须显示 Lorem ipsum。因为该区域选择了“Lorem ipsum”。
如果我从页面中选择任何文本并单击提交按钮它正在工作，但如果我将文本写入文本框并制作它，则它不是。因为当我点击另一个空间时，文本框的选择被取消。
现在的问题是，当我从文本框中选择一个文本并单击任何其他控件或空格时，必须仍然选择所选的文本。
它是如何完成的？
好的，这是我的代码：
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);
}
问题，虽然我为 IE 提供的代码在很多站点上都有提供，但我无法在我当前系统上的 IE6 副本上运行。也许它对你有用，这就是我给它的原因。
您寻找的技巧可能是 .focus() 调用，将焦点返回给 textarea 以便重新激活选择。
[更新] 我通过 onKeyDown 事件得到了正确的结果（选择内容）：
document.onkeydown = function (e) { ShowSelection(); }
所以代码是正确的。同样，问题是通过单击按钮获得选择...我继续搜索。
[更新] 我用li标签绘制的按钮没有成功，因为当我们点击它时，IE 取消选择之前的选择。上面的代码使用一个简单的input按钮，虽然......
这是一个更简单的解决方案，基于文本选择发生在鼠标上的事实，因此我们为此添加了一个事件侦听器：
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>这适用于所有浏览器。
如果您还想通过键盘处理选择keyup，请使用相同的代码为 添加另一个事件侦听器。
如果不是因为这个Firefox的错误在2001年申请回（是的，14年前），我们可以更换指定的值window.mySelection用window.getSelection().toString()，这在IE9 +以及所有现代浏览器上运行，并且还获得非textarea的部分所做的选择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" />对于 Opera、Firefox 和 Safari，您可以使用以下功能：
function getTextFieldSelection(textField) {
return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}
然后，您只需将文本字段元素（如 textarea 或 input 元素）的引用传递给函数：
alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));
或者，如果您希望 <textarea> 和 <input> 拥有自己的 getSelection() 函数：
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 "";
};
然后，您只需执行以下操作：
alert(document.getElementsByTagName("textarea")[0].getSelection());
alert(document.getElementsByTagName("input")[0].getSelection());
例如。
下面是一个非常小的、独立的示例。下载 jquery-textrange.js 并复制到同一文件夹。
<!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>