text readonly, 입력 제한,입력막기

<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 전송시 값이 전달되지 않는다.