HTML

CREATE A NON-EDITABLE HTML TEXT FIELD

(quick & simple examples)

READONLY - CANNOT EDIT, BUT STILL A VALID FIELD <input type="text" value="Hello" readonly>

NON-EDITABLE TEXT FIELD

01

ALSO WORKS ON TEXTAREA <textarea readonly>Hello</textarea> <textarea disabled>World</textarea>

DISABLED -  CANNOT EDIT, NOT AN APPLICABLE FIELD <input type="text" value="World" disabled>

CSS STYLE NON-EDITABLE

02

READONLY input:read-only, textarea:read-only {   color: #296aad;   background: #f7f6ff;   border: 1px solid #ddd; }

DISABLED input:disabled, textarea:disabled {   color: #9e9e9e;   background: #efefef;   border: 1px solid #ddd; }

JAVASCRIPT NON-EDITABLE

03

GET TARGET FIELD var demo = document.getElementById("TARGET");

ENABLE demo.disabled = false; demo.readOnly = false;

SET DISABLED OR READ ONLY demo.disabled = true; demo.readOnly = true;