제이쿼리 textarea 텍스트 입력 영역 비활성화, 활성화

textarea 텍스트 입력 영역 비활성화, 활성화 예제

$("#textarea").attr("readonly", true);

$(".edit").click(function(event) {
	$("#textarea").attr("readonly", false);
});

 

크롬에서는 상관없으나 익스플로러에는 커서가 깜박여서 활성화된 듯한 착각을 불러일으키므로 포커스를 제거해준다onfocus="this.blur()" 를 사용하거나 disabled를 이용해준다.

 

 

 

요소의 비활성 readonly, disabled 차이와 사용법

 

reaonly 와 disabled는 보통 웹 페이지에서 어느 특정 요소를 비활성화 처리할 때 사용
(readonly는 text요소, 나머지 요소는 disabled 사용)

하지만 이 둘의 가장 큰 차이점은 DOM 객체에서 읽을 수 있느냐없느냐로
readonly의 경우 객체는 읽으나 객체의 쓰기를 비활성화하지만 disabled 된 요소는 DOM 객체를 아예 읽지 않는다. 

그러나 예외는 있다고 disabled 된 요소의 값을 간단히 서블릿으로 전달하는 2가지 방법이 있으며 아래와 같다.

1) hidden 으로 해당 값을 전달하는 방법으로 disabled된 요소의 값을 hidden된 input요소의 value 에 넣어 전달
2) submit이나 serialize 하기 전 해당 요소의 disabled 속성을 제거했다가 전송 후 다시 disabled  

 

$("#id").attr("disabled", false);  //해당 요소의 disabled 속성 변경(false)
var dataParam = $("#searchForm").serialize();  //데이터 serialize 
$("#id").attr("disabled", true);  //해당 요소의 disabled 속성 변경(true)