input type="text" 에서 글 쓰지 못하게 막기 ( readonly, disabled )

<input type="text" />

위와 같은 input 개체가 있을 때,

글 쓰지 못하게 막는 방법 중, 대표적으로 readonly 와 disabled 가 있다.

이 둘 모두 input 타입의 속성이다.

따라서 다음과 같이 사용할 수 있다.


using html

<input type="text" id="txt1" readonly />
<input type="text" id="txt2" disabled /> 
<textarea id="txtfield1" readonly ></textarea> 
<textarea id="txtfield2" disabled ></textarea> 
 
<input type="password" id="pass1" readonly /> 
<input type="password" id="pass2" disabled />

using script

var oEle1 = document.getElementById('txt1') ; 
var oEle2 = document.getElementById('txt2') ; 
var oEle3 = document.getElementById('txtfield1') ; 
var oEle4 = document.getElementById('txtfield2') ; 
var oEle5 = document.getElementById('pass1') ; 
var oEle6 = document.getElementById('pass2') ; // "readOnly" 로서 대문자임에 유의한다. 
 
oEle1.readOnly = true ; 
oEle2.readOnly = true ; 
oEle3.readOnly = true ; 
oEle4.readOnly = true ; 
oEle5.readOnly = true ; 
oEle6.readOnly = true ; 
 
oEle1.disabled = true ; 
oEle2.disabled = true ; 
oEle3.disabled = true ; 
oEle4.disabled = true ; 
oEle5.disabled = true ; 
oEle6.disabled = true ;

comment : 'readonly' , 'disabled' 둘다 사용자의 입력을 하지 못하게 막는 기능은 동일하지만,

form 안에서 사용하였을 경우,

'readonly' 는 form 전송이 가능하지만,

'disabled' 는 form 전송시 값이 전달되지 않는다.