JavaScript 选择元素中的文本(类似于用鼠标突出显示)

我想让用户单击一个链接,然后它在另一个元素( 而不是 输入)中选择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);

}

}

以上是 JavaScript 选择元素中的文本(类似于用鼠标突出显示) 的全部内容, 来源链接: utcz.com/qa/399166.html

回到顶部