[HTML&CSS] JavaScript 없이 input 값 유무 판단하기: placeholder-shown

만약 여러분이 제작하는 서비스에서 input[type=text]의 값 유무를 판단해 "입력되었습니다"라는 문구를 표시해야 한다면 어떻게 구현할 수 있을까요.

아마 가장 처음으로 떠오르는 방법은 JavaScript로 input DOM의 value값을 받아오는 것일 것입니다. 아마도 위 기능은 다음과 같은 코드로 구현할 수 있습니다.

<style>
  /* 공통 스타일 */
  input {border:2px solid silver; padding:3px; height:20px}
  input:focus {outline:none}
</style>

<input type="text" class="input" placeholder="bar@gmail.com">
<span class="msg">값이 입력되었습니다.</span>

<script>
  const input = document.querySelector('.input');
  const msg = document.querySelector('.msg');
  input.addEventListener('keyup',e=>{
    if(!!e.target.value) {
      msg.style.cssText="display:inline-block";
      input.style.cssText="border-color:silver";
    } else { 
      msg.style.cssText="display:none";
      input.style.cssText="border-color:red";
    }
  })
</script>

keyup 이벤트로 인해 약간 딜레이가 느껴지는 것을 알 수 있습니다.

 

 

그러나 이렇게 JavaScript를 이용하지 않고도 HTML과 CSS만을 이용해 비슷하게 구현할 수 있습니다. 바로 가상 클래스 요소 :placeholder-shown과 css의 선택자를 이용하면 훨씬 간단하게 구현할 수 있습니다.

<style>
  /* 공통 스타일 */
  input {border:2px solid silver; padding:3px; height:20px}
  input:focus {outline:none}
  /* 개별 스타일*/
  .input:placeholder-shown {border-color: red}
  .input:placeholder-shown + .msg {display:none}
</style>

<input type="text" class="input" placeholder="foo@gmail.com"/>
<span class="msg">값이 입력 되었습니다.</span>

 

가상 클래스 요소 :placeholder-shown은 input과 textarea에서 placeholder가 보이는지 여부를 판단합니다. 만약 보인다면 해당 가상 클래스 요소의 스타일이 적용되는 방식입니다.

 

즉, 사용자가 값을 입력하면 placeholder가 보이지 않게 되므로 해당 스타일이 적용되지 않게 되고 CSS의 선택자와 결합하면 다양하게 활용할 수 있습니다.

 

MDN은 :placeholder-shown을 이용해 재미있는 예시들을 보여주는 대표적으로 placeholder의 스타일을 커스텀하는 것입니다.

<style>
  input:placeholder-shown {text-overflow: ellipsis}
</style>
<input placeholder="이 입력창에 어떤 것이라도 입력해주세요">

입력창의 placeholder에 text-overflow: ellipsis가 적용된 것을 알 수 있습니다.

이외에도 특정 입력창이 입력되지 않았을 때만 스타일을 따로 주는 식으로 다양하게 활용해 볼 수 있습니다.

 

다만 font-style이나 text-overflow는 먹히지만 color의 경우엔 커서에만 적용되고, 반대로 `::placeholder`요소를 사용하면 color는 먹히지만 text-overflow는 먹히지 않는다는 것을 알게 되었습니다.

 

JavaScript를 이용하면 입력값의 유효성을 체크하는 등 더 세부적으로 컨트롤이 가능하지만, 꼭 그런 연산까지 필요하지 않다면 굳이 JavaScript를 쓰지 않더라도 CSS만으로 이런 인터렉션 요소를 꾸밀 수 있습니다. 최근 프론트엔드 개발이 발전하면서 JavaScript는 점점 프로그래밍의 영역으로 넘어가고 이전에 JavaScript가 맡고 있던 인터렉션 구현 쪽은 점점 CSS가 잠식해가고 있다는 걸 느낍니다.

 

:placeholder-shown에 대한 자세한 내용은 MDN의 스펙문서를 참고해주세요.

:placeholder-shown

Can I use 확인 결과 Edge 18을 제외하면 거의 모든 브라우저에서 작동합니다.

Can I use 확인 결과 거의 모든 브라우저에서 작동합니다.(IE11의 경우 -ms-placeholder-shown 를 이용해 구현 가능)

Can I use... Support tables for HTML5, CSS3, etc

끝으로 이 요소를 처음 알게 해준 1분 코딩님의 영상 링크를 남깁니다. 1분 코딩을 보면 몰랐던 css 요소를 알려주거나 간단하게 css팁을 알려주니 참고하시면 좋을 것 같습니다.

1분코딩 :: CSS 가상클래스 :placeholder-shown