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

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


유의하기 바란다.



출처 : http://jwizard.tistory.com/35