getSelection()只能应用于某个元素(而不是整个文档)
Can getSelection() be applied to just a certain element (not the whole document)?
我正在测试getSelection()
方法,我希望我的程序在某段文本中获得选定的文本,并将其显示在div标记中。我使用了以下代码:
var txt = document.getSelection();
document.getElementById("display").innerHTML = "The text you have selected is: " + txt + ".";
但是,我希望程序只在段落本身进行选择,而不是在整个文档中进行选择。我尝试使用document.getElementById("id").getSelection();
,但没有成功。
如何使getSelection()
仅适用于某个元素?
这里有一种方法,仅在Chromium 19中测试(它支持textContent
,对于Internet Explorer,必须使用innerText
):
function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}
var b = document.getElementsByTagName('body')[0],
o = document.getElementById('output');
b.onmouseup = function(e){
var selText = getSelectedText(),
targetElem = e.target.tagName.toLowerCase();
if (selText && targetElem == 'p') {
o.textContent = 'You selected the text: "' + selText + '" from a ' + targetElem + ' element.';
}
};
JS Fiddle演示。
getSelection()
仅作为window
和document
的方法可用。如果你想得到一个Range,它只代表用户选择中位于特定节点内的部分,这里有一个函数可以使用我的Rangy库来实现这一点(没有库的代码会更长,超出了我现在写的热情):
function getSelectedRangeWithin(el) {
var selectedRange = null;
var sel = rangy.getSelection();
var elRange = rangy.createRange();
elRange.selectNodeContents(el);
if (sel.rangeCount) {
selectedRange = sel.getRangeAt(0).intersection(elRange);
}
elRange.detach();
return selectedRange;
}
function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}
用咖啡书写:
getSelected = ->
if window.getSelection
return window.getSelection()
else if document.getSelection
return document.getSelection()
else
selection = document.selection and document.selection.createRange()
return selection.text if selection.text
return false
false
美味的javascript
相关文章:
- 如何将childNodes用于XML文档
- 用于车把助手的JSdoc文档
- 用于修改文档元素的 PHP 代码
- 收集订阅者的流星事件,用于在 mongodb 中新插入文档
- 如何将 :empty 选择器应用于 XML 文档
- 是否有 jQuery 事件用于何时将元素添加到文档中
- 如何仅在文本字段中有值时才将自定义过滤器应用于 ng-repeat
- 应为']'在IE 8文档模式的正则表达式中:IE 8标准
- 是否有用于在网页中嵌入HTML文档的JavaScript组件
- 谷歌文档,用于在网站上提供文本
- OnClick 会加载新的 HTML 文档,并应滚动到其底部
- Event.observe 仅适用于文档,不适用于特定 ID
- 为什么 w3schools JavaScript cookie 示例不适用于 html 文档
- 文档时的替代.URL 不适用于重定向的域
- JQuery API 文档生成器,用于打字稿自定义小部件
- jQuery sortable 仅适用于文档就绪,不适用于按钮
- 404错误'找不到文档'用于在Wordpress网站上安装Instafeed时的JavaScript文件
- 将 CSS 应用于 JavaScript 文档.writeln ( )
- 如何将类属性应用于HTML字符串(未在文档上呈现)
- 文档.getElementById用于链接id