range.endOffset в браузере Microsoft Edge выдает неверное значение - PullRequest
Новая
       19

range.endOffset в браузере Microsoft Edge выдает неверное значение

1 голос
/ 28 марта 2019

Это проблема браузера Microsoft Edge. Я пытаюсь прикрепить стиль CSS к выбранному слову, используя Range API. Существует проблема с пограничным браузером, когда я пытаюсь раскрыть функциональность range.endOffset. Здесь я прилагаю свой код. 

  <!DOCTYPE html>
  <html>
  <body>
  <p>This is sample content</p>
  <p id="demo"></p>

  <script>
  var range = null;
  var selection = window.getSelection();
  if( selection && selection.rangeCount > 0 ) 
  {
       range = selection.getRangeAt( 0 );
  }

  var startOffset = range.startOffset;
  var endOffset = range.endOffset;

 document.getElementById("demo").innerHTML =
 startOffset + "<br>" + endOffset; 
 </script>

 </body>
 </html>

Теперь, если я попытаюсь выбрать текстовый тег «content» формы «P», он даст правильное значение для range.startOffset, но даст неверное значение для range.endOffset. И это приведет к перепутанию стиля со всем тегом «P». Эта проблема возникает только в браузере Microsoft Edge, и если выделенный текст оканчивается каким-либо HTML-тегом, как здесь, он заканчивается текстом «содержимого». Если я пытаюсь выделить текст между текстом, эта проблема не возникает. Работает в браузере Chrome. Есть ли способ обойти эту проблему в браузере Edge?

1 Ответ

1 голос
/ 29 марта 2019

Какая у вас версия браузера Edge? Я воспроизвожу вашу проблему, используя следующий код для Edge 42 и Edge 44 версии. 

<p>This is sample content</p>
<p id="demo"></p>

<script>
    document.getElementsByTagName('p')[0].onmouseup = function () {
        var range = null;
        var selection = window.getSelection();
        if (selection && selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
        }

        var startOffset = range.startOffset;
        var endOffset = range.endOffset;

        document.getElementById("demo").innerHTML =
            startOffset + "<br>" + endOffset;
    }
</script>

В версии Edge 42, если я выберу «контент», endOffset будет 1.

в версии Edge 44, если я перетаскиваю, чтобы выбрать «содержимое», endOffset работает хорошо, но если Я выбираю «контент», используя метод двойного щелчка, endOffset по-прежнему будет 1.

Итак, эта проблема связана с браузером Edge, и я отправил отзыв об этой проблеме в Edge Platform.

В качестве обходного пути, я предлагаю вам рассчитать endOffset в соответствии с startOffset и выбранным текстом. Попробуйте использовать следующий код: 

<p>This is sample content</p>
<p id="demo"></p>

<script>
    document.getElementsByTagName('p')[0].onmouseup = function () {
        var range = null;
        var selection = window.getSelection();
        if (selection && selection.rangeCount > 0) {
            range = selection.getRangeAt(0);
        }

        var startOffset = range.startOffset;
        var endOffset = startOffset + selection.toString().length;

        document.getElementById("demo").innerHTML =
            startOffset + "<br>" + endOffset + "<br/>" + selection;
    }
</script>

Снимок экрана, как показано ниже:

enter image description here

...