- placeholder 란? -
회원가입을 하거나 로그인을 할 때
"아이디를 입력해 주세요"
"비밀번호를 입력해 주세요"
이렇게 뜨는 메세지들이 모두 placeholder다.
placeholder란 사용자로부터 입력받아야 하는 요소에 아무 내용이 없는 동안 사용자에게 보여줄 메세지다.
보통은 사용자가 어떤 값을 입력해야 하는지 알려주는 역할을 한다.
- placeholder 사용하기 -
placeholder로 메세지를 보여주려면
"placeholder"라는 속성 이름으로 값을 넣어주면 된다.
<input type="text" placeholder="내용을 입력해주세요" />
<textarea placeholder="내용을 입력해주세요" > </textarea>
- 메세지가 클릭하면 사라지도록 만들기 ( event 사용 ) -
placeholder는 사용자가 어떤 내용도 입력하지 않은 동안 보여주는 메세지다.
즉, 사용자가 아무 내용도 입력하지 않으면 메세지는 사라지지 않는다.
그런데 고객사 요구사항 중에 입력창을 클릭하면
placeholder 메세지가 안 보이도록 만들어 달라는 요구가 있었다.
나는 얼른 생각하기로, 해당 요소의 placeholder 속성값을 바꿔야 하나 생각이 들었다.
사용자가 입력창을 클릭했다는 것은 focus 이벤트가 일어났다는 것이고,
focus 이벤트에 placeholder를 조작하는 핸들러를 걸어야겠다고 생각했다.
그런데 focus 이벤트를 쓰면 상위 요소나 하위 요소과도 영향을 주고 받았다.
이벤트 버블링 때문이었다.
focusin 이벤트와 focusout 이벤트를 따로 걸어야 하나,
focus 와 blur 이벤트를 걸어야 하나,
여러 가지고 복잡해지고 있었다.
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#testInput').addEventListener('focusin', function(e) {
e.target.placeholder="";
});
document.querySelector('#testInput').addEventListener('focusout', function(e) {
e.target.placeholder="내용을 입력해주세요";
});
});
</script>
- 메세지가 클릭하면 사라지도록 만들기 ( CSS 사용 ) -
다른 사람이 코딩해 놓은 것을 보고 더 간편하게 구현하는 법을 알게 됐다.
바로 CSS를 이용하는 것이다.
<style>
input:focus::placeholder {
color: transeparent;
}
</style>
input 요소들 중에 focus 상태인 요소는
placeholder의 색상을 투명하게 바꾸는 것이다.
아주 기발하지 않은가!
값을 조작하지 않고 그대로 둔 채로
색상만 투명하게 바꾸는 법도 있었다!
(위 기능의 기술적인 해석은 css 문법에서
'구조 선택자', '상태 선택자', '반응 선택자' 등으로 검색해 보자.)
- 생각을 넓히자! -
요즘 웨이트를 배운다.
그중에 상체 운동이 개인적으로 어렵다.
목표하는 근육으로 무게를 받아야 하는데 엉뚱하게 손이 무게를 다 받게 된다.
손에 힘을 뺀 채로 해야 하는데 그게 잘 안 된다.
평소에 많이 쓰던 익숙한 근육으로 동작을 수행하려는 관성 때문이다.
프로그래밍도 마찬가지인 듯 싶다.
내가 익숙하고 내가 자주 쓰던 기술 영역은 프론트엔드다.
어떤 기능을 구현하려고 할 때 당장 JavaScript로 구현할 방법이 떠오른다.
이벤트와 속성값을 조정하여 어떻게든 만들려고 한다.
그러나 힘을 좀 빼면 시야가 더 넓어지고 더 효율적인 구현이 가능해진다.
내가 사용할 수 있는 기술들의 가짓수 중에 css도 포함하자.
항상 쓰던 기술만 쓰려는 울타리에서 벗어나도록 노력하자.
-220623