placeholder기능 자바스크립트로 구현

placeholder가 모바일에서 안먹거나 IE에서 안먹을 때가 있다.

 

text박스일때는 value값을 넣어서 onfocus이벤트가 생기면 value값 초기화 시킴.

<input type="text" class="wd100p"  onfocus="this.value=''; return true" value="아이디"/>

 

비밀번호 일때는 value값이 한글로 표기가 안되므로

text박스를 하나 만들고 클릭하면 password 인풋박스가 보이도록 스크립트를 짠다.

      

<input type="text" id="pw_placeholder" value="비밀번호">
<input type="password" class="password_placeholder" style="display:none"/>

<!-- 패스워드 placeholder -->

<script type="text/javascript">
 $(document).ready(function(){
  $("#pw_placeholder").on('click', function() {
  $(this).css('display','none');
  $(this).next().css('display','inline-block');
  $(".password_placeholder").focus();
  });
 });
</script> 

 

 

------------------------------------------ 간단하게 스크립트삽입

 

placeholders.js

placeholders.min.js

 

제이쿼리가 필요없는 스크립트이다.

js파일안에 ccc를 검색하면, 플레이스홀더 폰트 색상을 변경할 수 있다.

사용법은 그냥 그대로 <input type="text" placeholder="이것저것" />

이런식으로 사용하면 된다.

 

참조 링크 http://jamesallardice.github.io/Placeholders.js/