Microsoft Edge возвращает значения, отличные от Chrome, когда вызывается document.getSelection () - PullRequest
Новая
       17

Microsoft Edge возвращает значения, отличные от Chrome, когда вызывается document.getSelection ()

0 голосов
/ 17 июня 2019

Я пытаюсь использовать функцию getSelection из документа DOM для извлечения элемента / компонента, выбранного в Edge, но я не получаю никаких значений для anchorNode и не получаю 0 для свойства rangeCount в возвращаемом объекте. Я также тестирую это на Chrome, и там он работает правильно, поэтому я знаю, что значения, возвращаемые Edge, не в порядке.

Мне нужно знать, есть ли способ получить правильный AnchorNode и RangeCount на Edge или есть ошибка. Кроме того, если вы знаете какой-то обходной путь, чтобы сделать это возможным, пожалуйста, дайте мне знать.

Я прикрепил два изображения, где вы можете видеть различия в объекте, возвращаемом document.getSelection() между Chrome и Edge, когда фокус указателя помещен в один и тот же элемент / компонент.

Объект выделения, возвращаемый при вызове document.getSelection в Chrome

Объект выделения, возвращаемый при вызове document.getSelection в Edge

------------------------- РЕДАКТИРОВАТЬ (для более практического примера) -------------- -----------

Чтобы дать вам более практичный пример, я попытался сделать выбор в основной строке поиска, введенной здесь, в StackOverflow, когда он был пустым, и он получил разные значения для Chrome и Edge (даже с текстом он возвращает ноль в Edge).

В Chrome он возвращал элемент / компонент в anchorNode и '1' в rangeCount, но в Edge он возвращает объект с нулевым anchorNode и '0' в rangeCount.

Это та же проблема, что и у меня на сайте, над которым я работаю, у меня возникают проблемы при выборе входа (это пользовательский ввод, и поэтому вы видите тег 'td' как anchorNode на chrome на предыдущем изображении) и получаю rangeCount, потому что я получаю разные значения в этих браузерах.

PS1. Я протестировал его с помощью консоли JS на инструментах разработчика каждого браузера, что аналогично использованию его в коде JS. Я также протестировал эту функцию getSelection на ярлыках и тегах, таких как p, div ... как @ Deepak-MSFT сделал это в своем ответе, и в этих тегах она отлично работает для обоих браузеров, проблема заключается в том, когда я пытаюсь использовать ее внутри текста введите, как та строка поиска.

Я прилагаю два gif-файла, чтобы вы могли видеть то, что я тестировал, в строке поиска здесь, в stackoverflow, чтобы вы могли воспроизвести и его.

Процесс тестирования document.getSelection при вводе строки поиска на странице Stackoverflow в Chrome

Процесс тестирования document.getSelection при вводе строки поиска на странице Stackoverflow в Edge

------------------------- РЕДАКТИРОВАТЬ (пример кода) ----------------- --------

Пожалуйста, запустите этот пример кода в обоих браузерах, Chrome и Edge, чтобы увидеть их различия. Просто нажмите на вводимый текст, наберите любые символы 

<!DOCTYPE html>
<html>
<body>

Input text: <input type="text" onfocus="myFunction(this)">

<div>Anchor Node: <b id="divsel1"></b></div>
<div>Range Count: <b id="divsel2"></b></div>

<script>
function myFunction(x) {
  var sel = document.getSelection();
  document.getElementById("divsel1").innerHTML = sel.anchorNode ? sel.anchorNode.nodeName : sel.anchorNode;
  document.getElementById("divsel2").innerHTML = sel.rangeCount;
  
}
</script>

</body>
</html>

1 Ответ

0 голосов
/ 18 июня 2019

Вы не опубликовали пример кода, поэтому мы не уверены, как вы пытаетесь получить выделение в вашем коде.

Я пытаюсь выполнить тест с приведенным ниже кодом в MS Edge и похоже, что он работает нормально. 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function GetSelectedText () {
            if (document.getSelection) {    // all browsers, except IE before version 9
                var sel = document.getSelection ();
                    // sel is a string in Firefox and Opera, 
                    // and a selectionRange object in Google Chrome, Safari and IE from version 9
                    // the alert method displays the result of the toString method of the passed object
                alert (sel);
            } 
            else {
                if (document.selection) {   // Internet Explorer before version 9
                    var textRange = document.selection.createRange ();
                    alert (textRange.text);
                }
            }
        }
    </script>
</head>
<body>
    <div>Please select <b>all</b> or a <i>part</i> of this text.</div>
    <br />
    <button onclick="GetSelectedText ()">Get selected text!</button>
</body>
</html>

Вывод в MS Edge:

enter image description here

Справка:

метод getSelection (документ)

Если проблема не устранена, попробуйте предоставить пример кода, который поможет решить проблему, и поможет нам лучше понять проблему.

...