Javascript Input Set Readonly Example

Jun 30, 2021 . Admin

Hello Friends, Now let's see example of how to use javascript input read-only example. We will use how to use if input set read-only in javascript. Here you will learn how to use javascript input set read-only. This is a short guide on input set read-only. Let's get started with how to input set read-only in javascript. Here i will give you many example how you can check javascript input set read-only. Example: 1
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Input Set Read-Only Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h3>JavaScript Input Set Read-Only</h3>
                        </div>
                        <div class="card-body">
                            Company Name: <input type="text" id="company" class="form-control">
                            <p>Click button to set the text field to read-only.</p>
                            <button onclick="test()" class="btn btn-primary">Check it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function test() {
            document.getElementById("company").readOnly = true;
        }
    </script>
</html>
Output: 1 
Company Name: abc (Read Only)
Example: 2 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Input Set Read-Only Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h3>JavaScript Input Set Read-Only</h3>
                        </div>
                        <div class="card-body">
                            College Name: <input type="text" id="test" class="form-control" readonly>
                            <p>Click button to find out whether the text field is read-only, or not.</p>
                            <button onclick="stud()" class="btn btn-primary">Try it</button>
                            <p id="dept"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function stud() {
            var c = document.getElementById("test").readOnly;
            document.getElementById("dept").innerHTML = c;
        }
    </script>
</html>
Output: 2 
College Name: (Can't Input)
Click button to find out whether the text field is read-only, or not.
true

It will help you....

#Javascript

You might also like...