![](/img/trans.png)
[英]JavaScript: Why doesn't the background change to the user's selection (simple)?
[英]Can you set and/or change the user’s text selection in JavaScript?
在 JavaScript 中,有多种方法可以访问用户的文本选择和创建文本选择(或范围)——请参阅http://www.quirksmode.org/dom/range_intro.html 。
根据该页面,您可以以编程方式创建一个范围,并访问其中的文本。 但是这样做不会改变用户的文本选择,或者让用户选择一些文本(如果他们还没有的话)。
您可以在 JavaScript 中设置和/或更改用户的文本选择吗?
是的。 在所有浏览器中,您都可以从用户的选择中获取一个或多个Range
或一个TextRange
,并且Range
和TextRange
都有更改范围内容的方法。
更新
您可以通过在大多数浏览器中创建一个Range
并将其添加到Selection
对象以及通过创建一个TextRange
并在 IE <= 8 中调用其select()
方法来设置用户的选择。
例如,要将选择设置为包含元素的内容:
function selectElementContents(el) {
if (window.getSelection && document.createRange) {
var sel = window.getSelection();
var range = document.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
}
}
Selection
对象还有几种方法可以用来改变用户在非 IE 浏览器中的选择。 如果您可以更具体地了解如何更改选择,那么帮助起来会更容易。
选择 API执行此操作。 window.getSelection()
不是创建一个new Selection()
(这看起来很直观,但不起作用),它总是返回一个Selection
对象——即使用户没有突出显示任何内容! 然后,您可以使用setBaseAndExtent()突出显示特定节点 - 这将更改用户选择的任何内容(即使未选择任何内容)以匹配您指定的内容。
下面的示例突出显示了此 StackOverflow 页面中的问题
const selection = window.getSelection()
const headerElement = document.querySelector('#question-header a')
selection.setBaseAndExtent(headerElement,0,headerElement,1)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.