奇怪的选择行为

Question

我的 JS 代码：

    function getSelectedText(){
      if(window.getSelection){
          select = window.getSelection().getRangeAt(0);
                  var st_span = select.startContainer.parentNode.getAttribute("id").split("_")[1];
                  var end_span = select.endContainer.parentNode.getAttribute("id").split("_")[1];
                  console.log(select.endContainer);
                  var ret_urn=[st_span,end_span];
                  return ret_urn
      }
      else if(document.getSelection){
          return document.getSelection();
      }

    }
    $(document).ready(function() {
      $("div#check_button button").click(function () {
                      var loc = getSelectedText();
                      console.log(loc);
                      });
    });
    

这是我的整个 html 文件：http://pastebin.com/acdiU623

很难解释，所以准备了短片：http://www.youtube.com/watch?v=tVk4K70JO80

简而言之：当我按住鼠标左键选择文本/数字并从字母/数字的一半开始选择时，虽然这个字母/数字没有突出显示，但它被添加到选择中。我必须精确地开始选择。宽字母没问题，但像 i、j 或 l 这样的字母很难。

这是我的电影的第二个例子。我在数字 5 长度的 3/4 处按下了左键，虽然 5 没有突出显示，但它被选中了。

在 FF 和 Opera 上测试。

Answer 1

好的，刚刚尝试了这个演示。它完美无瑕。它甚至可以在 Firefox 上运行。刚刚测试了歌剧和野生动物园，它也适用于它们。即使我选择了半个字母或数字，它也只会返回突出显示的文本，这是您进行选择时所期望的。

在一个新的网页上尝试一下，尽管只是为了测试目的。然后当它工作并且您对结果感到满意时，然后开始对现有页面进行更改。

它比您的代码简单得多。这是一个跨浏览器脚本，用于获取用户选择的文本

<script language=javascript>
function getSelText()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }
    else return;
document.aform.selectedtext.value =  txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name=aform >
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

http://www.codetoad.com/javascript_get_selected_text.asp

希望这会有所帮助。

PK

Answer 2

对于一个选择有多个不同的边界点，在用户看来它们是相同的。您看到的可能是以下内容之间的区别，其中| 是选择边界：

<span>5</span><span>|6</span><span>7|</span><span>8</span>

和

<span>5|</span><span>6</span><span>7</span><span>|8</span>

在这两种情况下，对所选内容调用 toString() 会得到相同的结果（“67”）。