HTML DOM onselect Event

Last Updated : 13 Mar, 2024

The HTML DOM onselect event occurs when a user selects text within an element, like input fields or textareas. It allows developers to execute JavaScript code in response to text selection actions.

Syntax:

In HTML

<element onselect="Script">

In JavaScript

object.onselect = function(){Script};

In JavaScript, using the addEventListener() method

object.addEventListener("select", Script);

HTML DOM onselect Event Examples

Example: In this example we are using the onselect event. When text is selected in the email input, “Selected” is displayed in a paragraph.

HTML


                    <!DOCTYPE html>
<html>
    <head>
        <title>HTML DOM onselect Event</title>
    </head>

    <body>
        <center>
            <h2>HTML DOM onselect Event</h2>
            Email:
            <input
                type="email"
                value="feedback@geeksforgeeks.org"
                id="mailID"
            />

            <p id="try"></p>
        </center>
        <script>
            document
                .getElementById("mailID")
                .addEventListener(
                    "select",
                    GFGfun
                );

            function GFGfun() {
                document.getElementById(
                    "try"
                ).innerHTML = "Selected";
            }
        </script>
    </body>
</html>