Menu
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>
569
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>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>
answered Nov 18 '25 09:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With