Question

我想在容器（DIV）中放一堆HTML然后让用户选择它的一部分。它不是我正在寻找的“可编辑区域”。因为我们不希望用户能够覆盖/更改文本。只需标记即可。

用户选择后，我想知道选择了什么，但也选择了部分IS。

例如

我们有一个项目符号列表，用户选择了项目符号3和4.
我们有一些Headline1和三段。然后用户选择中段的一部分。我想知道该段落的哪个位置。

我已经研究了一下，根据我的理解，MSIE在选择方面存在问题，如果涉及选择的startPos和endPos。

其次，如果标记文本在整个容器内多次出现怎么办？

以下是一个例子：

<div id="markable">

   <h1>Here is a nice headline</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
      tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
      neque, tempus iaculis sapien consectetur id.</p>

  <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
     Curae; Quisque fringilla massa id libero commodo venenatis.</p>

  <ol>
     <li>here is a bullet line #1</li>
     <li>here is a bullet line #2</li>
     <li>here is a bullet line #3</li>
     <li>here is a bullet line #4</li>
     <li>here is a bullet line #5</li>
     <li>here is a bullet line #6</li>
  </ol>

  <h2>here is a sub-headline</h2>

  <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
     Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
     per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
     malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
     consequat.</p>

</div>

如果用户选择“tempus”不足以知道单词，问题就在这里，我还需要知道单词的哪一个（什么段落/标题/子弹元素）。

原因是我们希望“读者”能够发现感兴趣/关注的事物。有时整段，有时只是一个单词或标题。

完美的解决方案

如果我们以某种方式可以检测到所选DOM中的“元素”（从顶部算起）。其次，该特定元素内部有多少（起点和终点）。

因为那时我们可以将某种Ajax做回我们的ASP.NET，告诉后端已经标记了什么然后做了什么......

我发现一些在线代码编辑器可以完成上述的BUNCH +比需要的更多，但是相信这个解决方案要简单得多。无法找到开始使用jQuery解决方案的正确方法。

希望jQuery Yoda读这篇文章。： - ）

Answer 1

很抱歉，这只是一个部分答案，它将为您提供选择在所有浏览器中开始和结束的元素索引，但选择开始和结束的偏移仅适用于Gecko和WebKit浏览器。 IE只支持一个TextRange对象，这对我来说有点神秘，而且有点痛苦（这个答案底部的链接有一个覆盖所有浏览器的实现示例）

此解决方案返回选择包含的元素的索引（与您的#markable容器相关）以及开始和结束选择的索引（与其包含的节点相关）。

在这个例子中，我使用事件来捕获包含选择的元素（这可以解决浏览器差异），但是你可以很容易地做到这一点而没有事件（对于Firefox，Opera，Chrome和Safari），因为Range对象给出了你是anchorNode和focusNode，它们分别是选择开始和结束的DOM节点（这里有更多信息http://www.quirksmode.org/dom/range_intro.html）

<html>
<head>

  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  <script>

  var end;
  var start;

  indexes = new Array();
var endIndex;
  var startIndex;
  $(document).ready(function(){


$("#markable").mouseup(function(event){
end = event.target;

indexes.push($("*", "#markable").index($(end)));
//normalize start and end just in case someone selects 'backwards' 
indexes.sort(sortASC);




event.stopPropagation()
})

$("#markable").mousedown(function(event){
indexes.length=0;
start = event.target;
event.stopPropagation()
indexes.push($("*", "#markable").index($(start)));
})

$(".button").click(function(){

sel = getSel();

alert("Index of the element selection starts in (relative to #markable): "+indexes[0] +"\n" + 
"Index of the of the beginning of selection in the start node: "+ sel.anchorOffset+"\n" + 
"Index of the element selection ends in  (relative to #markable): "+ indexes[1]+"\n"+ 
"Index of the of the end of selection in the end node: "+ sel.focusOffset)

})

  })




function sortASC(a, b){ return (a-b); }
function sortDESC(a, b){ return (b-a); }

function getSel()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }

    else if (document.selection)
    {
        txt = document.selection.createRange();
            }
    else return;
return txt;
}
</script>

</head>
<body>
<div id="markable">

   <h1>Here is a nice headline</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
      tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
      neque, tempus iaculis sapien consectetur id.</p>

  <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
     Curae; Quisque fringilla massa id libero commodo venenatis.</p>

  <ol>
     <li>here is a bullet line #1</li>
     <li>here is a bullet line #2</li>
     <li>here is a bullet line #3</li>
     <li>here is a bullet line #4</li>
     <li>here is a bullet line #5</li>
     <li>here is a bullet line #6</li>
  </ol>

  <h2>here is a sub-headline</h2>

  <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
     Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
     per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
     malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
     consequat.</p>

</div>
<input type=button class=button value="Get selection data">


</body>
</html>

这是一个链接，它将为您提供更多的跨浏览器解决方案（向下滚动到示例2） http://help.dottoro.com/ljjmnrqr.php

编辑：对于IE，您需要使用document.body.createTextRange（）来获取文本范围。我仍然不确定你是如何得到相当于anchorOffset但以下链接可能会有所帮助： http://bytes.com/topic/javascript/answers/629503-ie-selection-range-set-range-start-click-position-get-char-offset

Answer 2

这是一个跨浏览器库，可以为您提供所需的一切 http://code.google.com/p/rangy/

选择文本，然后使用jQuery for AJAX将其分成三个部分

2 个答案: