브라우저는 disabled와 같이 비활성화된 요소의 이벤트 또한 비활성화하기 때문에
화면상 비활성화 된 상태에서 이벤트를 걸고 싶다면 readonly를 사용하면 된다.
단, readonly는 input의 값을 넘길수도, focus가 가능하기도 하며
disabled는 input의 값을 넘기지 못하며 click이벤트 자체가 비활성화이다
readonly로 마크업 후 readonly가 된 input에만 css를 적용시키고 싶다면
input[read-only] {background: red}input[read-only]를 선택자로 잡으면 된다.
readonly된 input에 focus를 제외하고 싶다면 아래 두가지 방법이 가능하다.
- onfocus 속성 추가
<input type="text" id="" onfocus="this.blur()" readonly placeholder="입력해주세요.">- point-events css 추가
input[readonly]{
pointer-events: none;
}1번 방법은 click이벤트 적용이 안되기 때문에 disabled와 거의 비슷하기 때문에 2번 방법으로 추천
