Non-Editable Text Field In HTML Javascript (Simple Examples)

Welcome to a quick tutorial on how to create a non-editable text field in HTML and Javascript. Want to “fix” a text field in HTML? Prevent the user from changing the value?

To create a non-editable text field in HTML, we can either attach the readonly or disabled attribute – <input type="text" readonly/> or <input type="text" disabled/>.

That covers the quick basics, but read on for more detailed examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Non-Editable Field Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

NON-EDITABLE TEXT FIELDS

All right, let us now get into the examples of non-editable text fields in HTML.

 

HTML READ-ONLY & DISABLED TEXT FIELDS

1-non-editable.html
<!-- (A) READONLY -->
<input type="text" value="Hello" readonly/>
 
<!-- (B) DISABLED -->
<input type="text" value="World" disabled/>
 
<!-- (C) ALSO WORKS ON TEXTAREA -->
<textarea readonly>Hello</textarea>
<textarea disabled>World</textarea>





Yep, it’s that simple. As in the introduction, just attach a readonly or disabled property to the text field. What is the difference between the two? Semantically speaking:

  • readonly fields are still “valid”. It’s just that the value is fixed and cannot be changed.
  • disabled fields are “invalid”. They no longer apply because of another choice in the form. For example, choosing “I have not used the product before” and disabling a “product feedback” text field.

 

 

STYLING NON-EDITABLE TEXT FIELDS IN CSS

2-css-style.html
 <style>
/* (A) READONLY */
input:read-only, textarea:read-only {
  color: #296aad;
  background: #f7f6ff;
  border: 1px solid #ddd;
}
 
/* (B) DISABLED */
  input:disabled, textarea:disabled {
  color: #9e9e9e;
  background: #efefef;
  border: 1px solid #ddd;
}
</style>
 
<input type="text" value="Hello" readonly/>
<input type="text" value="World" disabled/>
<textarea readonly>Hello</textarea>
<textarea disabled>World</textarea>





For you guys who want to customize your own non-editable fields, simply use the :read-only or :disabled pseudo-class in CSS.

 

 

JAVASCRIPT SET READ-ONLY & DISABLED TEXT FIELDS

3-js.html
<script>
/* (A) ENABLE TEXT FIELD */
function enable () {
  var demo = document.getElementById("demo");
  demo.value = "Enabled";
  demo.disabled = false;
  //demo.readOnly = false;
}

/* (B) DISABLE TEXT FIELD */
function disable () {
  var demo = document.getElementById("demo");
  demo.value = "Disabled";
  demo.disabled = true;
  //demo.readOnly = true;
}
</script>
 
<input type="text" id="demo"/>
<input type="button" value="Enable" onclick="enable()"/>
<input type="button" value="Disable" onclick="disable()"/>

Lastly, here’s a quick example to showcase how Javascript can also set/unset the readonly and disabled properties – This should come in handy for you guys who are working on dynamic forms.

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

 

INFOGRAPHIC CHEAT SHEET

Non-Editable Text Fields In HTML (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!


Leave a Comment

Your email address will not be published. Required fields are marked *