我想让用户点击一个链接，然后它选择另一个元素（不是输入）中的 HTML 文本。
“选择”的意思与您通过将鼠标拖到文本上来选择文本的方式相同。这一直是研究的负担，因为每个人都用其他术语谈论“选择”或“突出显示”。
这可能吗？到目前为止我的代码：
HTML：
<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>
JS：
function SelectText(element) {
$("#" + element).select();
}
我是否遗漏了一些明显的东西？
function selectText(node) {
node = document.getElementById(node);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
} else {
console.warn("Could not select text in node: Unsupported browser.");
}
}
const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>这是一个工作演示。对于那些正在寻找 jQuery 插件的人，我也制作了其中一个。
我在这个线程中找到了解决方案。我能够修改给定的信息并将其与一些 jQuery 混合，以创建一个非常棒的函数来选择任何元素中的文本，无论浏览器如何：
function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
这是一个没有浏览器嗅探和不依赖 jQuery 的版本：
function selectElementText(el, win) {
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
sel = win.getSelection();
range = doc.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);
这个线程（现在已经死了）包含非常棒的东西。但是由于“安全错误”，我无法使用 FF 3.5b99 + FireBug 在此页面上正确执行此操作。
一比！！我可以使用此代码选择整个右侧边栏，希望对您有所帮助：
var r = document.createRange();
var w=document.getElementById("sidebar");
r.selectNodeContents(w);
var sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
PS：-我无法使用 jquery 选择器返回的对象，例如
var w=$("div.welovestackoverflow",$("div.sidebar"));
//this throws **security exception**
r.selectNodeContents(w);
Jason 的代码不能用于 iframe 内的元素（因为范围不同于窗口和文档）。我解决了这个问题，并对其进行了修改，以便用作任何其他 jQuery 插件（可链接）：
示例 1：单击选择 <code> 标签内的所有文本并添加类“selected”：
$(function() {
$("code").click(function() {
$(this).selText().addClass("selected");
});
});
示例 2：单击按钮时，选择 Iframe 内的元素：
$(function() {
$("button").click(function() {
$("iframe").contents().find("#selectme").selText();
});
});
注意：记住 iframe 源应该位于同一个域中以防止安全错误。
jQuery 插件：
jQuery.fn.selText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
}
我在 IE8、Firefox、Opera、Safari、Chrome（当前版本）中对其进行了测试。我不确定它是否适用于较旧的 IE 版本（我真的不在乎）。
您可以使用以下函数来选择任何元素的内容：
jQuery.fn.selectText = function(){
this.find('input').each(function() {
if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) {
$('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
}
$(this).prev().html($(this).val());
});
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
这个函数可以调用如下：
$('#selectme').selectText();