HTML
HOW TO CREATE A NON-EDITABLE HTML TEXT FIELD
READONLY <input type="text" value="Hello" readonly/> DISABLED <input type="text" value="World" disabled/>
NON-EDITABLE TEXT FIELD
01
ALSO WORKS ON TEXTAREA <textarea readonly>Hello</textarea> <textarea disabled>World</textarea>
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
var demo = document.getElementById("TARGET"); SET DISABLED OR READ ONLY demo.disabled = true; demo.readOnly = true;
ENABLE demo.disabled = false; demo.readOnly = false;