W3docs
en
Log in

How to Make the Text Input Non-Editable

In this snippet, you can find two methods of making a text input non-editable. Use either the HTML “readonly” attribute or add the CSS pointer-events property.

Tags

In this snippet, you can find two ways of making the text of an <input> element non-editable. You can use either the <span class="attribute">readonly</span> attribute on the <input> tag or add a little CSS.

Solution with the HTML <span class="attribute">readonly</span> attribute

The <span class="attribute">readonly</span> attribute specifies that the value cannot be modified, although the user can still tab to it, highlight it, and copy the content.

Example of making the text input non-editable using the HTML <span class="attribute">readonly</span> attribute:

Example of making the text input non-editable using the HTML “readonly” attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="text" value="W3docs" class="left field" readonly />
  </body>
</html>
Try it Yourself »
Info

The <span class="attribute">readonly</span> attribute is valid only on the following input types: text, email, url, tel, number, password, date and time.

Solutions with the CSS pointer-events property

The second way of making the input text non-editable is using the CSS pointer-events property set to "none", which will stop the pointer-events.

Example of making the text input non-editable using the CSS pointer-events property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      .inputField {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    Non-Editable:
    <input class="inputField" name="input" value="W3docs" />
    <br />
    <br /> Non-Editable:
    <input class="inputField" name="input" value="Non editable input" />
  </body>
</html>
Try it Yourself »

In the example above, we have two <input> elements, and both of them are non-editable, whereas, in the next example, only one of the <input> elements is non-editable.

Example of making editable and non-editable text inputs with the CSS pointer-events property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      .input1 {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    Non-Editable:
    <input class="input1" name="input" value="W3docs" />
    <br />
    <br /> Editable:
    <input class="input2" name="input" value="W3docs" />
  </body>
</html>
Try it Yourself »