W3Context Online Editor v1.1

<!DOCTYPE html>
<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>