因此,当您将注意力移出文本区域并专注于输入标签时,您希望保留选择。
您需要记住选择(文本区域失去焦点时的起点和终点)并强制选择以使其持续存在。
要记住选择,您可以将el.selectionStart 和el.selectionEnd 存储在一个函数内的两个全局变量中,该函数在textarea 标记的onblur() 事件中调用。
然后在您的pasteIntoInput() 中,您可以考虑替换这两点。
强制选择 - 检查此解决方案 for persisting 选择。然而,这使用 jquery,而不是普通的 javascript。
但是,我不确定该解决方案是否真的有效。我在这里尝试过http://jsfiddle.net/sandeepan_nits/qpZdJ/1/,但它没有按预期工作。
更新
我怀疑焦点消失后是否可以继续选择。可能选择需要关注,我给出的答案链接试图关注然后选择。在这种情况下,这不会解决您的问题。因此,替代方案可能是 -
但当然取决于你的要求。
进一步更新
检查http://jsfiddle.net/sandeepan_nits/qpZdJ/2/ 是否有工作“在没有焦点的情况下替换文本区域内的文本”(如您所愿)但没有模糊选择。我仍然不知道是否可以保持选择模糊。
另一个更新(12 月 21 日)
适用于 IE 和其他浏览器的工作解决方案
http://jsfiddle.net/sandeepan_nits/qpZdJ/24/
这是相同的代码:-
html -
<textarea id='text' cols="40" rows="20" onbeforedeactivate="storeSelectionIeCase();" onblur="storeSelectionOthersCase();">
</textarea>
<div id="opt">
<input id="input" type="text" size="35">
<input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>
</div>
还有所有的js
var storedSelectionStart = null;
var storedSelectionEnd = null;
function pasteIntoInput(text)
{
el=document.getElementById("text");
el.focus();
if((storedSelectionStart != null) && (storedSelectionEnd != null))
{
start = storedSelectionStart;
end = storedSelectionEnd;
}
else
{
start = el.selectionStart;
end = el.selectionEnd;
}
if (typeof start == "number"&& typeof end == "number")
{
var val = el.value;
var selStart = start;
var end = selStart + text.length;
el.value = val.slice(0, selStart) + text + val.slice(end );
}
else if (typeof document.selection != "undefined")
{
var textRange = document.selection.createRange();
textRange.text = text;
textRange.collapse(false);
textRange.select();
}
}
function storeSelectionOthersCase()
{
if(!(isBrowserIE6() || isBrowserIE7()))
{
storeSelection();
}
else
{
return false;
}
}
function storeSelectionIeCase()
{
if((isBrowserIE6() || isBrowserIE7()))
{
storeSelection();
}
else
{
return false;
}
}
function storeSelection()
{
//get selection
el=document.getElementById("text");
var el = document.getElementById("text");
var sel = getInputSelection(el);
//alert("check"+sel.start + ", " + sel.end);
storedSelectionStart = sel.start;
storedSelectionEnd = sel.end;
//alert("see"+storedSelectionStart +" - "+storedSelectionEnd );
}
function getInputSelection(el)
{
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
function isBrowserIE6()
{
var ret = false;
if(($.browser.msie) && (parseInt($.browser.version) == 6) && (!this.XMLHttpRequest))
{
ret = true;
}
return ret;
}
function isBrowserIE7()
{
var ret = false;
if(($.browser.msie) && ((parseInt($.browser.version) == 7) && (this.XMLHttpRequest)))
{ //Modification because of IE tester IE7 being detected as IE6
ret = true;
}
return ret;
}
之前的小提琴在 IE 中不起作用,因为当 onblur() 事件触发时,选择在 IE 中被破坏。我已经为 IE 6 和 7 应用了一些基于浏览器的条件,但尚未在 IE 8 中进行测试。
感谢Tim Down,他帮助我找出了之前小提琴的问题。