Javascript 如何获取没有焦点的输入的选定文本/插入符号位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5149683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get selected text/caret position of an input that doesn't have focus?
提问by mpen
Is it possible to (reliably) get the selected text/caret position in a input text box if that field doesn'thave focus?
如果该字段没有焦点，是否可以（可靠地）在输入文本框中获取选定的文本/插入符号位置？
If not, what's the best way to get and retain this data?
如果没有，获取和保留这些数据的最佳方法是什么？
Basically, when a user clicks a button I want to insert some text at the caret position. However, as soon as the user clicks that button, the field loses focus and I lose the caret position.
基本上，当用户单击按钮时，我想在插入符号位置插入一些文本。但是，只要用户单击该按钮，该字段就会失去焦点并且我失去插入符号位置。
回答by NakedBrunch
The following script will hold the caret position and then a button click will insert text at the stored position:
以下脚本将保持插入符号位置，然后单击按钮将在存储位置插入文本：
Javascript:
Javascript：
<script type="text/javascript">
//Gets the position of the cursor
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
function InsertText() {
var textarea = document.getElementById('txtArea');
var currentPos = getCaret(textarea);
var strLeft = textarea.value.substring(0,currentPos);
var strMiddle = "-- Hello World --";
var strRight = textarea.value.substring(currentPos,textarea.value.length);
textarea.value = strLeft + strMiddle + strRight;
}
</script>
HTML:
HTML：
<textarea id="txtArea" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button onclick="InsertText();">Insert Text</button>
The script can be modified if you want to hold the caret position in a variable onblur.
如果您想在变量 onblur 中保持插入符号位置，可以修改脚本。
回答by Hussein
Use the following 2 functions to save and restore text selection.
使用以下 2 个函数来保存和恢复文本选择。
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
Check Working example at http://jsfiddle.net/LhQda/
在http://jsfiddle.net/LhQda/检查工作示例
Type something in the TEXTAREA, then click outside the TEXTAERAto lose the selection, then click on the focus button to restore selection and focus again.
在 中键入一些内容TEXTAREA，然后单击外部TEXTAERA以丢失选择，然后单击焦点按钮以恢复选择并再次获得焦点。
