Input 비활성화

문제 상황

• html

<div class="int-area default">
	<input type="text" name="id" id="id" autocomplete="off" required disabled value=${vo.id}>
	<label for="id">ID</label>
</div>

• css

.int-area input:focus + label,
.int-area input:valid + label {
  top: -2px;
  font-size: 13px;
  color: #166caa;
}

disabled 또는 readonly 속성으로 처리를하면 css 속성이 적용이 안되어, label이 text를 가리고 있었다.
확실한 원인은 모르겠다...
:focus가 문제인건가, :valid 가 문제인 것인가...?

문제 정의
focus를 받지 못했던 것!!!!!!!!!!!

:focus: 양식의 입력 칸 등 포커스를 받은 요소
:focus-within: 자손이 포커스를 받았을 때의 요소를 선택
:valid: 규칙에 맞는 값을 입력한 경우
:invalid: 규칙에 맞지 않은 값을 입력한 경우

해결 방법

구글링을 하던 중 disabled 와 readonly를 사용하지 않고 focus를 유지한채로 사용하지 못하게 하는 방법을 찾았다!

click >> 참고 사이트

javascript에 기본적으로 내장된 함수 중

onfocus="javascript:blur();"

사용자가 입력 상자를 클릭할 때 포커스를 가지지 못하도록 하는 Javascript 이벤트 핸들러/메소드 조합이다.

해결!! 문제점이 무엇이었는지 꼭 분석해보아야 할 듯

문제점은 focus를 받지 못했던 것.
onfocus 속성을 이용하여 focus를 받을 수 있도록 해주었다.
이렇게만 설정하면 disabled나 readonly처럼 값을 변경할 수 없는 input이 되지않는다. 즉 수정이 가능한 상태로 남겨져있다는 것.
이를 해결하기 위해 onfocus="javascrpt:blur();를 사용한다. 이는 javascript:blur() 함수를 이용해서 focus를 지워주는 것이다. focus를 받은 상태로 css 적용 값을 불러 올 수 있도록 해준 후에 값의 변경을 할 수 없도록 강제적으로 focus를 지워주는 방식을 사용한 것 같다.

맞나요...?