Блог

Я создаю веб-приложение на чистом JavaScript. Я бы хотел, чтобы пользователь мог выбрать весь абзац, когда он нажимает на него один раз в Chrome Android, и чтобы появилось контекстное меню «Копировать» Android, чтобы они могли легко скопировать текст, который они только что выбрали.

Я уже выделил весь абзац одним нажатием, без проблем, используя API выбора. Но меню «Копировать» не появляется при выборе текста. Почему нет, и как я могу заставить его отображаться в Chrome на Android?

Я создал JSFiddle, изолирующий мою проблему, которую вы можете открыть в Chrome Android, чтобы проверить. Вот код из него.

HTML:

 <p>Lorem ipsum</p>
<p>Dolorum est</p>
 

JavaScript:

 let selectedNode = undefined;

document.querySelectorAll("p").forEach(function (element) {
  element.addEventListener("click", function () {
    const selection = window.getSelection();
    selection.removeAllRanges();

    if (element === selectedNode) {
      selectedNode = undefined;
    } else {
      const range = document.createRange();
      range.selectNodeContents(element);
      selection.addRange(range); 

      selectedNode = element;
    }
  })
});
 

Когда я нажимаю на любой из абзацев, текст абзаца выделяется, но диалоговое окно копирования не появляется:

When I tap the paragraph again to DESELECT it (which essentially calls window.getSelection().removeAllRanges() , see the JavaScript above), THEN the Copy dialog comes up:

I’m curious why this happens, but ultimately I’d like to know:

How can I get the Copy dialog to show up when the text is selected, rather than when it’s deselected?