如果该字段不具有焦点,是否可以(可靠地)在输入文本框中获取所选文本/插入符位置?
如果没有,获取和保留这些数据的最佳方法是什么?
基本上,当用户点击按钮时,我想在插入位置插入一些文本。但是,只要用户单击该按钮,该字段就会失去焦点而我将失去插入位置。
答案 0 :(得分:9)
以下脚本将保持插入位置,然后单击按钮将在存储位置插入文本:
使用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:
<textarea id="txtArea" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button onclick="InsertText();">Insert Text</button>
如果要在变量onblur中保持插入位置,可以修改脚本。
答案 1 :(得分:4)
使用以下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();
}
}
}
在TEXTAREA
中键入内容,然后在TEXTAERA
外单击以丢失选择,然后单击焦点按钮以恢复选择并再次聚焦。