Skip to content
Advertisements

JavaScript Form Events

We will see the use of JavaScript form event. The following section contains all the events.

If; More samples, if you want more details, please click on the subject you want.

AttributeValueDescription
onblurscript The JavaScript onblur property runs when the object loses focus.
onchangescript The JavaScript onchange property works when the property of an element changes.
oncontextmenuscript The oncontextmenu property of the JavaScript works when the user is right-clicked to open the context menu.
onfocusscript The Onfocus feature works when it focuses on an object.
oninputscript The JavaScript oninput function works when an element is entered or changed.
onresetscript The JavaScript onreset property is used to reset a form.
onsearchscript The JavaScript onsearch property runs the codes when the user presses the “enter” key.
onselectscriptThe JavaScript onselect property runs after you select the text in an element.

onblur Event

The JavaScript onblur property runs when the object loses focus. The Onblur property is most commonly used in form objects. for example, onblur runs when the user leaves a form field.

The JavaScript onBlur event is triggered when the corresponding element loses its focus. The HTML onBlur property allows the function or script to be executed when the blur event occurs on the element.
This type of event management functions, which can only be specified in a single function, is called event handler. However, since more than one event management function can be specified in the HTML DOM, the event listener name is used rather than the name of the event handler. In DOM, event listener functions can be attached / attached to the element associated with the attachEvent and addEventListener functions.


onblur Examples

Example 1

onblur example 1
<style>
        body{
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
        input {
            display: block;
            color: #e53f3f;
            border: 2px solid #262626;
            border-radius: 20px;
            padding: 5px;
            padding-left: 10px;
            outline: none;
            font-family: Verdana;
            font-weight: bold;
            box-shadow: 0px 10px 20px #262626;
        }
    </style>
<body>

    <input type="text" id="name" onblur="Uname();" placeholder="onblur"/>
        
    <script>

        function Uname() {
            let name = document.getElementById("name");
            name.value = name.value.toUpperCase();
        }



    </script>
</body>

Example 2

onblur example 2
<body>

    <div id="container">
        <input type="text" id="box1" onblur="repeat();" placeholder="repeat" />
        <input type="text" id="box2" onblur="charCodeAt();" placeholder="charCodeAt" />
    </div>

        
    <script>

        function repeat() {
            let box1 = document.getElementById("box1");
            box1.value = box1.value.repeat();
        }

        function charCodeAt() {
            let box2 = document.getElementById("box2");
            box2.value = box2.value.charCodeAt();
        }

    </script>
</body>

Example 3

onblur example 3
<body>


        <input type="password" id="pWord" placeholder="password" />
  
        
    <script>
        
        document.querySelector("#pWord").addEventListener("blur", blurFunction);

        function blurFunction() {
            alert("Make sure you entered the password correctly");
        }



    </script>
</body>

Example 4

onblur example 4
<body>


    <input id="textLog" name="txt" type="text" onblur="login();">

    <span id="result"> </span>


    <script>

        function login() {
            var obj = document.getElementById('result');
            var txt = document.getElementById('textLog');

            if (isNaN(txt.value))
                obj.innerHTML = "You entered text!";
            else
                obj.innerHTML = "You entered number!";
        }



    </script>
</body>

onchange Event

The JavaScript onchange property works when the property of an element changes. For example; used to control a radio button or check box.

Do not confuse this event with oninput. The oninput property runs when the value of an item is changed immediately. Another difference is that the onchange property works within the element.


onchange Examples

Example 1

onchange example 1
<body>

    <label>
        <h2>Selects</h2>
        <select id="selects" name="selects>
            <option value="">Select One/option>
            <option value="select1">select1</option>
            <option value="select2">select2</option>
            <option value="select3">select3</option>
        </select>
    </label>


    <script>


        document.getElementById("selects").addEventListener("change", message)

        function message() {
            alert("Your choice has changed: " + event.target.value)
        }

    </script>
</body>

Example 2

onchange example 2
<body>

    <h2>touppercase</h2><br>
    <input type="text" id="upper" onchange="upperFunction();" />

    <script>

        function upperFunction() {
            let txt = document.getElementById("upper");
            txt.value = txt.value.toUpperCase();
        }

    </script>
</body>

Example 3

onchange example 3
<body>

    <label>
        <h2>Selects</h2>
        <select id="selects" name="selects">
            <option value="">Select One/option>
            <option value="select1">select1</option>
            <option value="select2">select2</option>
            <option value="select3">select3</option>
        </select>
    </label>

    <script>

        document.getElementById("selects").onchange = function () {
            message()
        }

        function message() {
            alert("Your choice has changed: " + event.target.value)
        }

    </script>
</body>

oncontextmenu Event

The oncontextmenu property of the JavaScript works when the user is right-clicked to open the context menu. If the default behavior is not prevented, the browser context menu is enabled.


oncontextmenu Examples

Example 1

oncontextmenu  example 1
<body>

    <div oncontextmenu="contextFunction()" id="box"></div>


    <script>

        function contextFunction() {
            alert("The color of the box has changed.")
            let box = document.getElementById("box");
            box.style.background = '#4c4ab7';
        }


    </script>
</body>

Example 2

oncontextmenu example 2
<body>

    <div id="box"></div>


    <script>

        document.addEventListener("contextmenu", contextFunction);

        function contextFunction() {
            alert("The color of the box has changed.")
            let box = document.getElementById("box");
            box.style.background = '#4c4ab7';
        }


    </script>
</body>

Example 3

oncontextmenu example 3
<body>

    <div id="box"></div>


    <script>

        document.getElementById("box").oncontextmenu = function () {
            contextFunction();
        };

        function contextFunction() {
            alert("The color of the box has changed.")
            let box = document.getElementById("box");
            box.style.background = '#4c4ab7';
        }


    </script>
</body>

onfocus Event

The JavaScript onfocus property is the opposite of the onblur property. The Onblur property works when exiting a focused object. The Onfocus feature works when it focuses on an object.

The JavaScript onFocus event is triggered when it is focused by entering the relevant element. The HTML onFocus property specifies the function or script to execute when the focus event occurs on the element.

This type of event management function, which can only be specified as a single function in HTML, is called an event handler. However, since multiple event management functions can be specified in the HTML DOM, the event listener name is used rather than the event handler name. In DOM, event listener functions can be attached / attached to the element associated with the attachEvent and addEventListener functions.


onfocus Examples

Example 1

onfocus example 1
<body>

    <input type="text" id="name" onfocus="nameFunction()" placeholder="name"/>

    <script>

        function nameFunction() {           
            document.getElementById("name").style.borderRadius = "0px";
            document.getElementById("name").style.transform = "scale(1.5)";
        }

    </script>
</body>

Example 2

onfocus example 2
<body>

    <input type="text" id="name" placeholder="name"/>

    <script>

        document.getElementById("name").onfocus = function () {
            nameFunction();
        }

        function nameFunction() {           
            document.getElementById("name").style.borderRadius = "0px";
            document.getElementById("name").style.transform = "scale(1.5)";
        }

    </script>
</body>

Example 3

onfocus example 3
<body>
    <input type="text" id="name" placeholder="name"/>
    <script>

        document.getElementById("name").addEventListener("focus", nameFunction)

        function nameFunction() {           
            document.getElementById("name").style.borderRadius = "0px";
            document.getElementById("name").style.transform = "scale(1.5)";
        }

    </script>
</body>

Example4

onfocus example 4
<body>
    <input type="text" id="name" placeholder="name"/>
    <script>

        document.getElementById("name").addEventListener("focus", focusFunction);
        document.getElementById("name").addEventListener("blur", blurFunction);

        function focusFunction() {
            document.getElementById("name").style.borderRadius = "0px";
            document.getElementById("name").style.transform = "scale(1.5)";
        }

        function blurFunction() {
            document.getElementById("name").style.transform = "scale(1)";
        }


    </script>
</body>

Example 5

onfocus example 5
    <!-- like placeholde -->
    <input type="text" id="username" onfocus="this.value=''" 
           value="username" onblur="this.value='username'"/>
    <input type="text" id="password" onfocus="this.value=''" 
           value="password" onblur="this.value='password'"/>

oninput Event

The JavaScript oninput function works when an element is entered or changed.

The JavaScript oninput property is similar to the onchange property. The onchange property runs immediately when the focus of the element is lost. The oninput property runs immediately when the element’s contents are changed.

oninput Examples

Example 1

oninput example 1
<body>

    <input type="text" size="30" id="txt"/>
    <div id="res"></div>

    <script>

        let txt = document.getElementById("txt"),
            res = document.getElementById("res");

        txt.addEventListener("input",inputFunction)

        function inputFunction() {
            res.textContent = "character(s): " + txt.value.length;
        }

    </script>
</body>

Example 2

oninput example 2
<body>
    <input type="text" id="txt" oninput="inputFunction()"/>
    <script>

        function inputFunction() {
            alert("you are changing the contents of the text")
        }

    </script>
</body>

Example 3

oninput example 3
<body>
    <input type="text" id="txt" />
    <script>

        document.getElementById("txt").addEventListener("input", inputFunction)

        function inputFunction() {
            alert("you are changing the contents of the text")
        }

    </script>
</body>

Example 4

oninput example 4
<body>
    <input type="text" id="txt" />
    <script>

        document.getElementById("txt").oninput = function () {
            inputFunction();
        };

        function inputFunction() {
            alert("you are changing the contents of the text")
        }

    </script>
</body>

Example 5

oninput example 5
<body>

    <h2>oninput event</h2>
    <input type="text" id="txt"/>
    <p id="result"></p>

    <script>

        txt.addEventListener("input", inputFunction);

        function inputFunction() {
            let txt = document.getElementById("txt").value;
            document.getElementById("result").innerHTML = txt;
        }

    </script>

</body>

onreset Event

The JavaScript onreset property is used to reset a form.


onreset Examples

Example 1

onreset example 1
<body>

    <form onreset="message();">
        <input type="text" />
        <input type="reset" value="Reset"/>
    </form>

    <script>

        function message() {
            alert("the text you entered has been deleted")
        }
       
    </script>
</body>

Example 2

onreset example 2
<body>

    <form id="form">
        <input type="text" />
        <input type="reset" value="Reset"/>
    </form>

    <script>

        document.getElementById("form").addEventListener("reset", message)

        function message() {
            alert("the text you entered has been deleted")
        }
       
    </script>
</body>

Example 3

onreset example 3
<body>

    <form id="form">
        <input type="text" />
        <input type="reset" value="Reset"/>
    </form>

    <script>

        document.getElementById("form").onreset = function () {
            message();
        };

        function message() {
            alert("the text you entered has been deleted")
        }
       
    </script>
</body>

onsearch Event

The JavaScript onsearch property runs the codes when the user presses the “enter” key. Or it occurs when you click the “x” button of type = “search” in the element.

Notice when using the onsearch property. Firefox and internet explorer does not support this feature.

onsearch Examples

Example 1

onsearch example 1
<body>

    <input type="search" id="sBox" onsearch ="shFunction();" 
           placeholder="search..."/>

    <script>

        function shFunction() {
            alert("onsearch feature worked.")
        }

    </script>
</body>

Example 2

onsearch example 2
<body>

    <input type="search" id="sBox" placeholder="search..."/>

    <script>

        document.getElementById("sBox").onsearch = function () {
            shFunction();
        };

        function shFunction() {
            alert("onsearch feature worked.")
        }

    </script>
</body>

Example 3

onsearch example 3
<body>

    <input type="search" id="sBox" placeholder="search..."/>

    <script>

        document.getElementById("sBox").addEventListener("search",shFunction);
       

        function shFunction() {
            alert("onsearch feature worked.")
        }

    </script>
</body>

onselect Event

The JavaScript onselect property runs after you select the text in an element. The Onselect event is mostly used in “input type = text” or “textarea”.

onselect Examples

Example 1

onselect example 1
<body>
    <textarea onselect="message();">onselect-onselect-onselect-onselect</textarea>
    <script>
        function message() {
            alert("The onselect property is running")
        }
    </script>
</body>

Example 2

onselect example 2
<body>

    <input type="text" id="txt" value="truecodes.org" />

    <script>

        document.getElementById("txt").addEventListener("select", function () {
            message();
        })

        function message() {
            alert("The onselect property is running")
        }

    </script>
</body>

Example 3

onselect example 3
<body>

    <input type="text" id="txt" value="truecodes.org" />

    <script>

        document.getElementById("txt").onselect = function () {
            message();
        }


        function message() {
            alert("The onselect property is running")
        }

    </script>
</body>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: