How to change Input box borders after filling the box using JavaScript ?

How to change Input box borders after filling the box using JavaScript ?

Last Updated : 24 Jan, 2023

In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list.

Approach: Whenever the input value is changed with some value by the user, the onchange event attribute is triggered. After the event is fired, the value is checked if it is not null. If the user value exists, then the bottom border of the input control is changed to dotted red color by using inline styling.

Syntax:

<element onchange = "script">

Example: In this example, we will change the border-bottom style when the user types some text in the field.

HTML

<body style="text-align: center;">
    <h2>GeeksForGeeks</h2>

    <h2>
        Change input
        borders after filling data
    </h2>

    <form>
        <label> NAME</label>
        <input type="text" id="fname" name="fname" value="">
        <input type="submit" value="submit">
    </form>

    <script>
        var gfg = document.getElementById("fname");
        
          gfg.onchange = function (e) {
            if (gfg.value != '') {
                e.target.style.borderBottom
                        = "4px dotted red";
            }
        };
    </script>
</body>

Output:

How to change Input box borders after filling the box using JavaScript ?

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How to change Input box borders after filling the box using JavaScript ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to Change Border Width of Div in JavaScript ?

Div elements are essential in creating modern web applications, and manipulating their properties dynamically can enhance user experience. In this article, we'll see how to change the border width of a div element using JavaScript. The border-width property in CSS is used to specify the width of the

How to Adjust the Width of Input Field Automatically using JavaScript?

The <input> element in HTML is used to create interactive controls for forms, allowing users to input data. It is one of the most versatile elements, with various input types and attributes that make it powerful for building forms. One important attribute is the width attribute, which allows y

How to trigger HTML button after hitting enter button in textbox using JavaScript ?

In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the k

Change the Border of HTML Element in JavaScript

In this article, we will see how to change the Border of HTML element using JavaSCript. To change the border of an element, first, we select the element, and then use HTML DOM border style property to change the border. The CSS border properties are given below: border-style: The border-style In Jav

How to apply bottom border with only Input text field using CSS ?

Adding a bottom border to the input field visually distinguishes it from surrounding elements on the page. Making input fields stand out on a website in a form for example is crucial. Styling these inputs with clear borders, appealing colors, and effects, can easily capture the userâ€™s attention.Tabl

How to set the color of an element border with JavaScript ?

In this article, we will see how to set the color of an element's border with JavaScript. To set the color of an element's border with JavaScript, we can use the element's style property. Method 1: First, we will create a text element and then apply some CSS styles including the border color of the

Create OTP Input Field using HTML CSS and JavaScript

We will build an OTP (One-Time Password) input box, which is commonly used on many websites. This interactive and engaging UI element allows users to enter their OTP conveniently and efficiently. We will walk through the step-by-step process of creating this functionality using HTML, CSS, and JavaSc

How to Set Cursor Position in Content-Editable Element using JavaScript?

To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery

How to Add an Input Field on Button Click in JavaScript ?

JavaScript allows us to dynamically add an input field upon button click. We can use the below approaches for adding an input field on Button Click in JavaScript. Table of Content Using DOM ManipulationUsing Template Literal and InnerHTMLUsing DOM ManipulationDOM manipulation is used to dynamically