Я добавил слушатель событий ко всему документу. Однако происходит нечто странное. При выборе отображается только текст в поле ввода. Ничего не происходит, когда я выделяю текст в теге <p>

<!DOCTYPE html>
<html>

<body>

  <p>This example uses the addEventListener() method to attach a "select" event to an element.</p>

  <input style="width:100%" type="text" value="Only text in the input field is being displayed when selected!" id="myText">

  <p id="demo"></p>

  <script>
    document.addEventListener("select", myFunction);

    function myFunction() {
      let selection = window.getSelection().toString();
      document.getElementById("demo").innerHTML = selection;
    }
  </script>

</body>

</html>
2
Personal Information 1 Май 2019 в 21:50

3 ответа

Лучший ответ

Событие select доступно только для элементов input :

Согласно MDN:

Событие доступно не для всех элементов на всех языках. Например, в HTML события select можно отправлять только в форме и элементах.

Поэтому в качестве альтернативы мы можем использовать событие mouseup для проверки выделения текста.

<!DOCTYPE html>
<html>

<body>

  <p id="test">This example uses the addEventListener() method to attach a "select" event to an element.</p>

  <input style="width:100%" type="text" value="Only text in the input field is being displayed when selected!" id="myText">
  <p id="demo"></p>
  <script>
    document.addEventListener("mouseup", function(){
    if(document.getSelection()){
      document.querySelector("#demo").textContent = document.getSelection();
    }else if(window.getSelection()){
      document.querySelector("#demo").textContent = document.getSelection();
    }else if(document.selection){
      document.querySelector("#demo").textContent = document.selection.createRange().text;
    }
    });
  </script>

</body>

</html>
3
Fullstack Guy 1 Май 2019 в 19:15

Нет события выбора для p элементов. Альтернативой может быть использование события мыши.

<!DOCTYPE html>
<html>

<body>

  <p>This example uses the addEventListener() method to attach a "select" event to an element.</p>

  <input style="width:100%" type="text" value="Only text in the input field is being displayed when selected!" id="myText">

  <p id="demo"></p>

  <script>
  
  function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
   }

    document.addEventListener("select", myFunction);

    function myFunction() {
      let selection = window.getSelection().toString();
      document.getElementById("demo").innerHTML = selection;
    }
    
    document.onmouseup = function() {
        document.getElementById("demo").innerHTML = getSelectionText();
    };
  </script>

</body>

</html>
1
Vishnu 1 Май 2019 в 19:07

Вам понадобится слушатель "mouseup" на DOM. Затем вы можете использовать метод getSelection в объекте Window, чтобы получить Выбор объекта. Оттуда простой вызов метода «toString» даст вам выделенный текст.

document.addEventListener("mouseup", checkForSelection);
function checkForSelection(evt){
  var selectedText = window.getSelection().toString();
  if ( selectedText ){
    console.log("Selected Text: " + selectedText);
  } else {
    console.log("No Text Selected");
  }
}
<div>
<p>Text in paragraph 1</p>
<p>More Text in another paragraph</p>
</div>
1
ChrisOnBass 1 Май 2019 в 19:09