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>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>- 2 Per MDN: "The event [select] is not available for all elements in all languages. For example, in HTML, select events can be dispatched only on form <input type="text"> and <textarea> elements." developer.mozilla/en-US/docs/Web/API/Element/select_event – junvar Commented May 1, 2019 at 18:57
- @ Luca Kiebel I think you misunderstand what i'm trying to do. I'm not trying to set the value on the input field – Personal Information Commented May 1, 2019 at 18:58
3 Answers
Reset to default 4The 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>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>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>