时间戳

首页 > 解决方案 > 选择整个元素时，focusNode 返回 undefined

javascript - 选择整个元素时，focusNode 返回 undefined

问题描述

我需要识别文本选择的开始和结束 <p> 元素的 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 时，它会显示开始和结束 <p> id。但是，如果选择在段落末尾结束，则有时它会将 selectedEndId 返回为undefined。谁能解释为什么以及如何解决它？我在 Safari、Chrome 和 Opera 中观察到了这个错误，但在 FF 中没有。谢谢你的帮助。

标签： javascriptjquerygetselection

解决方案

我能够重新创建问题，当您选择一行然后通过在第一个字符之前停止（很难解释）而选择下面的一行时会发生这种情况。

问题是浏览器认为您选择了正文，我无法解释，但我找到了解决方案，这是一个适合我的代码：

 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');

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

推荐阅读