我有一个文本框和一个链接按钮。 当我输入一些文本，选择其中一些文本，然后单击链接按钮时，来自文本框的选定文本必须显示在消息框中。
我该怎么做？
当我点击下面文本框的提交按钮时，消息框必须显示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)
{ // Internet Explorer version
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
alert("You selected: " + selectedText);
}
document.onkeydown = function (e) { ShowSelection(); }
所以代码是正确的。问题在于如何在单击按钮时获取选择...我继续搜索。
使用 li 标签绘制的按钮没有成功，因为当我们单击它时，Internet Explorer 会取消先前的选择。但上述代码可以使用简单的 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的bug已于2001年提出（是的，14年前），我们可以将赋值给window.mySelection替换为window.getSelection().toString()，它适用于IE9+和所有现代浏览器，并获取在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" />disp()中有更复杂的代码，当代码从文本区域获取选择（例如构建一个selection-menu），浏览器可能已经清除了它，因为按钮上发生的click事件意味着文本区域接收到了blur事件，这会清除选择。我的答案通过在发生选择时将其保存在变量中来解决这个问题。 - Dan Dascalescu对于Opera、Firefox和Safari浏览器，您可以使用以下函数：
function getTextFieldSelection(textField) {
return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}
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());
<!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>
// jQuery
var textarea = $('#post-content');
var selectionStart = textarea.prop('selectionStart');
var selectionEnd = textarea.prop('selectionEnd');
var selection = (textarea.val()).substring(selectionStart, selectionEnd);
// JavaScript
var textarea = document.getElementById("post-content");
var selection = (textarea.value).substring(textarea.selectionStart, textarea.selectionEnd);