문제 상황
- 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를 지워주는 방식을 사용한 것 같다.
맞나요...?
