Question

我需要确定文本选择的开始和结束

元素的ID。我写了以下内容：

  $(document).on('keydown', function ( e ) {
        if ((e.metaKey ) && (String.fromCharCode(e.which).toLowerCase() === 'c') ) {
          var selectedText = document.getSelection();
          if (selectedText && selectedText != '') {
            var selectedBeginId = $(selectedText.anchorNode.parentNode).attr('id');
            var selectedEndId = $(selectedText.focusNode.parentNode).attr('id');
            alert(selectedBeginId + ' - ' + selectedEndId);
          } else {
            alert('No passage selected');
          }
        }
    });

HTML是这样的：

 <body>
      <p id="p-001">1 Lorem ipsum</p>
      <p id="p-002">2 Lorem ipsum</p>
      <p id="p-003">3 Lorem ipsum</p>
      <p id="p-004">4 Lorem ipsum</p>
      <p id="p-005">5 Lorem ipsum</p>
      <p id="p-006">6 Lorem ipsum</p>
  </body>

当我选择一些文本范围并按meta + c时，它将显示

id的开始和结束。但是，如果选择在段落的结尾处结束，则有时它会将selectedEndId返回为 undefined 。谁能解释为什么以及如何解决？我在Safari，Chrome和Opera中观察到了此错误，但在FF中却没有观察到。感谢您的帮助。

Answer 1

我能够重现该问题，当您选择一行然后在下面的那一行时，它会停在第一个字符之前（很难解释）。

问题是浏览器认为您选择了主体，我无法解释，但是找到了解决方案，下面的代码对我有用：

 var selectedEndId;
 if($(selectedText.focusNode.parentNode)[0] != document.body){
   selectedEndId = $(selectedText.focusNode.parentNode).attr('id');
 }else{
   selectedEndId = selectedBeginId;
 }

我在行下面添加了它：

      var selectedBeginId = $(selectedText.anchorNode.parentNode).attr('id');

如您所见，我的代码可以运行，但可能会带来其他问题。希望我能走上正轨！

Answer 2

感谢abvlle，我按照您的建议找到了解决方案。正如您所指出的，选择以某种方式落在两个元素上，其中父节点将不指向

元素，而是指向其父元素（主体或其他物体），而focusNode将指向下一个元素。因此，我这样写：

$(document).on('keydown', function ( e ) {
    if ((e.metaKey ) && (String.fromCharCode(e.which).toLowerCase() === 'c') ) {
      var selectedText = document.getSelection();
      if (selectedText && selectedText != '') {
        var selectedBeginId = $(selectedText.anchorNode.parentNode).attr('id');
        var selectedEndId = $(selectedText.focusNode.parentNode).attr('id');
        var selectedEnd = $(selectedText.focusNode.parentNode);
        if (!$(selectedEnd).is('p')) {
          selectedEndId = ($(selectedText.focusNode).prev().attr('id'));
        }
        alert(selectedBeginId + ' - ' + selectedEndId);
      } else {
        alert('No passage selected');
      }
    }
});

这很好用。感谢您的帮助！

选择整个元素时，focusNode返回未定义

2 个答案: