logo标签列表

使用javascript输出所选文本

javascript
4
我已向整个文档添加了一个事件侦听器。 然而，出现了一些奇怪的情况。 只有选择输入字段中的文本时才会显示文本。 当我在<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
根据MDN：“并非所有语言的所有元素都支持事件[select]。例如，在HTML中，只能在表单<input type =“text”>和<textarea>元素上分派选择事件。” https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event - junvar
@ Luca Kiebel，我认为您误解了我的意图。我并不是想在输入字段上设置值。 - Personal Information
3个回答
4

input元素才支持select事件：

根据MDN文档中的描述：

该事件并不适用于所有语言的所有元素。例如，在 HTML 中，只有 form 和 input 元素才能触发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>

2

对于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>

2
你需要在 DOM 上添加一个“mouseup”监听器。然后，你可以使用 Window 对象上的“getSelection”方法来获取一个Selection对象。从那里，简单调用“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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接