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;