Javascript Input Set Readonly Example
Jun 30, 2021 . Admin

<!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....