选择整个元素时，focusNode 返回 undefined答案

【问题标题】：focusNode returns undefined when selecting the whole element选择整个元素时，focusNode 返回 undefined
【发布时间】：2019-03-19 11:02:14
【问题描述】：

我需要识别文本选择的开始和结束

元素的 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 中没有。感谢您的帮助。

【问题讨论】：

标签： javascript jquery getselection

【解决方案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');

如您所见，我的代码有效，但可能会带来其他问题。我希望我能让你走上正轨！

【讨论】：

【解决方案2】：

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

元素，而是指向其父级（主体或其他东西），而 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');
      }
    }
});

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

【讨论】：