2

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

用户选择它后，我想知道选择了什么，但也想知道选择的部分在哪里。

例如。

  1. 我们有一个项目符号列表，用户选择项目符号行 3 和 4。

  2. 我们有一些 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 中的哪个“元素”（我猜是从顶部开始计数）。其次，该特定元素中有多少（起点和终点）。

因为那时我们可以对我们的 ASP.NET 执行某种 Ajax，它告诉后端已标记的内容，然后执行任何操作......

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

希望 jQuery Yoda 能读到这篇文章。:-)

4

2 回答 2

2

抱歉，这只是部分答案，它将为您提供在所有浏览器中选择开始和结束的元素的索引，但选择开始和结束的偏移量仅适用于 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-位置获取字符偏移

于 2011-01-29T12:33:15.657 回答
1

这是一个跨浏览器库，可以为您做所有你想做的事 http://code.google.com/p/rangy/

于 2011-02-01T09:47:18.993 回答