focusNode возвращает неопределенное значение при выборе всего элемента - PullRequest
Новая
       30

focusNode возвращает неопределенное значение при выборе всего элемента

2 голосов
/ 19 марта 2019

Мне нужно идентифицировать идентификаторы начала и конца

элементов выделения текста.Я написал следующее: 

  $(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, он отображает начало и конец

идентификаторы.Однако, если выбор заканчивается в конце абзаца, иногда он возвращает selectedEndId как undefined .Может кто-нибудь объяснить, почему и как это решить?Я наблюдал эту ошибку в Safari, Chrome и Opera, но не в FF.Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Спасибо 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');
      }
    }
});

Это хорошо работает. Спасибо за вашу помощь!

0 голосов
/ 19 марта 2019

Мне удалось воссоздать проблему, это происходит, когда вы выбираете строку, а затем строку чуть ниже, останавливаясь перед первым символом (трудно объяснить).

Проблема в том, что браузер думает, что вы выбираете тело, я не могу объяснить это, но я нашел решение, вот код, который работает для меня: 

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

Как видите, мой код работает, но он может создавать другие проблемы. Надеюсь, я выведу тебя на трассу!

...