All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Make Textbox Readonly In JavaScript

Last Updated : Mar 11, 2024

How To Make Textbox Readonly In JavaScript

In this tutorial we will show you the solution of how to make textbox readonly in JavaScript, the readonly property sets or returns whether a text field is read-only or not.

A read-only field cannot be modified. However a user can tab to it, highlight it, and copy the text from it.

We can use this property for prevent user interaction with particular text box.

Here we sets readonly property value to ‘true’ on textbox when we remove readonly property we have to set value to ‘false’.

Step By Step Guide On How To Make Textbox Readonly In JavaScript :-

Here we defined two input tags for getting string input from user and submit button defined for submit user input value then defined one div tag with id ‘h’ for displaying some instruction for user on webpage.

In script we defined function fun(), this is appends with onclick attribute in submit button so it will called when user clicks on it.

Here we setting input textbox readonly property value to ‘true’ and we appends defined program instruction on webpage by innerHTML for user.

<!DOCTYPE html>
<html>
    <head>
        <title>READ ONLY</title>
    </head>
    <body>
        <input id="str" type="text" placeholder="Enter a String">
        <input onclick="fun()" type="submit" value="Submit">
        <div id="h"></div>
        <script>
            function fun(){
                document.getElementById('str').readOnly=true;
                document.getElementById('h').innerHTML="Read only enabled so we can't write<br>";
            }
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Here we defined two input tags for getting input string from user and submit button for verify user submissions when user clicks on submit button by function ‘fun()’.
  7. Div tag defined with id attribute ‘h’. In script we defined function fun(), here user input condition of submission verified then we sets input box id ‘str’ readonly property value to ‘true’.
  8. We appended instruction message ‘Read only enabled so we can't write’ on div element ‘h’ and it will displayed on webpage.
  9. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to make textbox as readonly condition using javascript.

When we executes program on browser we can see the input box with submit button.

User needs to give input string and clicks on submit button then user interaction message of ‘Read only enabled so we can't write’ will displayed after first time submission user can’t write on it or modify, erase anything because we sets textbox readonly property value to ‘true’.

If user needs to remove readonly mode disabled we have set readonly property value to ‘false’.

I hope this tutorial on how to make textbox readonly in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.