Output selected text with javascript
Question
I have added an event listener to the entire document. However, something strange is happening. Only text in the input field is being displayed when selected. Nothing happens when I select text in the <p> tag
<!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>
3 answers
solution1
3 ACCPTED 2019-05-01 18:57:48
The select event is only available for input elements:
As per MDN :
The event is not available for all elements in all languages. For example, in HTML, select events can be dispatched only on form and elements.
So alternatively we can use a mouseup event to check the text selection.
<!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>
solution2
1 2019-05-01 19:07:23
No select event for p elements. Alternative could be to use a mouse up event.
<!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>
solution3
1 2019-05-01 19:09:33
You'll need a "mouseup" listener on the DOM. You can then use the "getSelection" method on the Window object to get a Selection object. From there, a simple call to the "toString" method will give you the text selected.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.