Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Input Month readOnly Property


The HTML DOM input month readOnly property returns and modify whether the input month field is read-only or not in an HTML document.

Syntax

Following is the syntax −

1. Returning readOnly

object.readOnly

2. Modifying readOnly

object.readOnly = true | false

Example

Let us see an example of HTML DOM input month readOnly property−

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.1rem;
   }
   input{
      display:block;
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
      margin:1rem auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input month readOnly property Demo</h1>
<p>Hi, Select your month of birth?</p>
<input type="month" class="monthInput">
<button onclick="rFunction()" class="btn">Read Only</button>
<button onclick="rWFunction()" class="btn">Read & Write</button>
<script>
   function rFunction() {
      var monthInput = document.querySelector(".monthInput");
      monthInput.readOnly =true;
   }
   function rWFunction(){
      var monthInput = document.querySelector(".monthInput");
      monthInput.readOnly =false;
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Input Month readOnly Property

Now, select any month using month input and then click on “Read Only” button and try to change your selection. It won't allow you to change now −

HTML DOM Input Month readOnly Property

Now, click "Read & Write" and try to change the selection. It will allow you to change −

HTML DOM Input Month readOnly Property