The HTML onselect attribute is an event handler used to specify a script that will run when the user selects some text within an input field or a textarea element.
Definition and Usage
➔ The onselect attribute is mainly used on the following elements:
- <input type="text">
- <input type="password">
- <input type="file">
- <textarea>.
onselect is not used with the <select> (dropdown) element, where the onchange event is used instead.
Syntax
//In HTML
<element onselect="myFunction()">
//OR
<textarea id="sample" rows="4" cols="50" onselect="myFunction()">
Select some of this text in the textarea.
</textarea>
//OR
<input type="text" id="sample" value="Select this text" onselect="myFunction()">
//In javascript
document.getElementById("sample").onselect=function() {myFunction();};
//OR
document.getElementById("sample").addEventListener("select", myFunction);
//OR
document.getElementById("sample").addEventListener("select", (event) => {
myFunction();
});
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onselect | All visible elements |
Example
<html>
<head>
<title>HTML onselect attribute example</title>
</head>
<body>
<h3>HTML onselect attribute example</h3>
<h4 id="idh5"></h4>
<p onselect="myFunction(event)">Select some text from the textfield to trigger the event.</p>
Name:<input type="text" id="name" value="Select this text" onselect="myFunction(event)">
<script>
function myFunction(e) {
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
const selectedText = e.target.value.substring(start, end);
document.querySelector("#idh5").innerHTML="Your selection is: "+selectedText;
alert('Text is selected in input field!: '+ selectedText);
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Example
Paragraph text selection and copy to clipboard
<html>
<head>
<title>HTML onselect attribute example</title>
</head>
<body>
<h3>HTML onselect attribute example</h3>
<h4 id="idh5"></h4>
<p onmouseup="paragraphSelection(event)">Select some text from the textfield to trigger the event.</p>
Name:<input type="text" id="name" value="Select this text" onselect="textfieldSelection(event)">
<script>
function textfieldSelection(e) {
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
const selection = e.target.value.substring(start, end);
const selectedText = selection.toString().trim();
if (selectedText.length > 0) {
document.getElementById("idh5").textContent ="Selection is: "+ selectedText;
copyToClipboard(selectedText);
alert('Text is selected in input field!: '+ selectedText);
}
}
function paragraphSelection(e) {
const selection = window.getSelection();
const selectedText = selection.toString().trim();
if (selectedText.length > 0) {
document.getElementById("idh5").textContent ="Selection is: "+ selectedText;
// You can copy this selection to Clipboard
copyToClipboard(selectedText);
alert('Text is selected: '+selectedText);
}
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert("Text successfully copied to clipboard!");
}).catch(err => {
alert('Could not copy text: ', err);
});
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.