如何使用jquery / javascript在div中进行选择

有很多代码可以在页面中进行选择，但我想要一个代码在div中进行选择，如果选择在我的div之外，则该函数必须返回空字符串;

有一个jquery插件只适用于textarea而不是div。 （这里）

谢谢

Answer 1

这有点冗长，因为冗长的边界比较，并且IE采用与其他浏览器不同的方法，但在所有主流浏览器中都能完成。 它还可以处理Firefox中的多个选择。

jsFiddle： http ： //jsfiddle.net/Q982A/2/

码：

function getSelectedTextWithin(el) { var selectedText = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(), rangeCount; if ( (rangeCount = sel.rangeCount) > 0 ) { var range = document.createRange(); for (var i = 0, selRange; i < rangeCount; ++i) { range.selectNodeContents(el); selRange = sel.getRangeAt(i); if (selRange.compareBoundaryPoints(range.START_TO_END, range) == 1 && selRange.compareBoundaryPoints(range.END_TO_START, range) == -1) { if (selRange.compareBoundaryPoints(range.START_TO_START, range) == 1) { range.setStart(selRange.startContainer, selRange.startOffset); } if (selRange.compareBoundaryPoints(range.END_TO_END, range) == -1) { range.setEnd(selRange.endContainer, selRange.endOffset); } selectedText += range.toString(); } } } } else if (typeof document.selection != "undefined" && document.selection.type == "Text") { var selTextRange = document.selection.createRange(); var textRange = selTextRange.duplicate(); textRange.moveToElementText(el); if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 && selTextRange.compareEndPoints("StartToEnd", textRange) == -1) { if (selTextRange.compareEndPoints("StartToStart", textRange) == 1) { textRange.setEndPoint("StartToStart", selTextRange); } if (selTextRange.compareEndPoints("EndToEnd", textRange) == -1) { textRange.setEndPoint("EndToEnd", selTextRange); } selectedText = textRange.text; } } return selectedText; } 

或者，您可以使用我的Rangy库，代码变为：

 function getSelectedTextWithin(el) { var selectedText = ""; var sel = rangy.getSelection(), rangeCount = sel.rangeCount; var range = rangy.createRange(); range.selectNodeContents(el); for (var i = 0; i < rangeCount; ++i) { selectedText += sel.getRangeAt(i).intersection(range); } return selectedText; } 

Answer 2

您可以使用：

 var node = window.getSelection ? window.getSelection().focusNode.parentNode: document.selection.createRange().parentElement(); 

获取选择结束的元素。

然后你可以确定该元素是否在div中。

Answer 3

您可以使用文本选择插件 – http://plugins.jquery.com/node/7411来实现此目的

然后，在绑定代码中，您可以查询事件目标以查看它是否在您需要的元素内。

  
Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.
 
Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.