Javascript 如何知道所选文本是否在特定div内
我有两个div,如下所示:Javascript 如何知道所选文本是否在特定div内,javascript,html,dom,Javascript,Html,Dom,我有两个div,如下所示: <div id="div1"> <p>something</p> <div><table><tr><td>Div1</td></tr></table></div> </div> <div id="div2"> <p>something else</p> <div><tabl
<div id="div1">
<p>something</p>
<div><table><tr><td>Div1</td></tr></table></div>
</div>
<div id="div2">
<p>something else</p>
<div><table><tr><td>Div2</td></tr></table></div>
</div>
<button type="button">Check</button>
某物
第一组
别的
第二组
检查
现在,我想知道什么时候选择了一些文本,然后按下按钮,所选文本是否在“div1”下。我该怎么做
编辑:解决方案必须在IE-7及以上版本中工作。您可以在每个div上观察到mouseup事件,并将以下方法绑定到它:
var endpoint = null
function getselected(event){
endpoint = event.target;
var t = '';
if(window.getSelection){
t = window.getSelection();
}else if(document.getSelection){
t = document.getSelection();
}else if(document.selection){
t = document.selection.createRange().text;
}
return t;
}
然后,此方法将返回所选文本,它将告诉您选择过程在触发事件的div上结束。如果需要startpoint,则必须将mousedown事件绑定到div,这将在变量中存储元素id,以便确定选择过程的起点和终点,并找出介于两者之间的div
var startpoint = null;
function beginSelection(event){
startpoint = event.target;
}
如果getSelected方法返回空字符串,则应重置开始和结束点。类似于:
function checkSelection() {
function checkNode(node) {
do {
if(node.id == "div1")
return true;
} while(node = node.parentNode);
return false;
}
if(window.getSelection) {
var selection = window.getSelection();
for(var i = 0, l = selection.rangeCount; i < l; i++) {
var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer;
if(checkNode(start) || (start != end && checkNode(end)))
return true;
}
}
if(window.scelection && window.selection.createRange) {
var range = window.selection.createRange();
if(range)
return checkNode(range.parentElement());
}
return false;
}
函数检查选择(){
功能检查节点(节点){
做{
如果(node.id==“div1”)
返回true;
}while(node=node.parentNode);
返回false;
}
if(window.getSelection){
var selection=window.getSelection();
对于(变量i=0,l=selection.rangeCount;i
下面的元素containsselection()
函数返回一个布尔值,表示指定元素是否包含用户选择的全部内容,并在所有主要浏览器(包括IE 6)中工作
现场演示:
代码:
函数isOrContains(节点、容器){
while(节点){
if(节点===容器){
返回true;
}
node=node.parentNode;
}
返回false;
}
功能元素包含选择(el){
var-sel;
if(window.getSelection){
sel=window.getSelection();
如果(选择范围计数>0){
对于(变量i=0;i
如果浏览器不支持window.getSelection(),该怎么办;
function isOrContains(node, container) {
while (node) {
if (node === container) {
return true;
}
node = node.parentNode;
}
return false;
}
function elementContainsSelection(el) {
var sel;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
for (var i = 0; i < sel.rangeCount; ++i) {
if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
return false;
}
}
return true;
}
} else if ( (sel = document.selection) && sel.type != "Control") {
return isOrContains(sel.createRange().parentElement(), el);
}
return false;
}