IE9이하 custom placeholder 처리하기

Custom Placeholder 

플레이스 홀더는 브라우저마다 조금씩 다르게 구현되어 있습니다.

예를 들어, Chrome 은 텍스트 필드에 키값이 입력되어질 때 플레이스홀더 마킹이 사라지고 키값에 대한 텍스트를 모두 지웠을 경우에 플레이스홀더 마킹값이 나타나게 됩니다.

그리고 IE10이상에서의 플레이스홀더는 텍스트 필드에  포커스가 갈 경우에 바로 플레이스홀더 마킹이 사라지게 됩니다.

IE9이하에서는 플레이스홀더가 지원하지 않기 때문에 IE9이하를 위한 사용자 플레이스홀더를 알아보도록 합니다.

IE9이하 Custom Placeholder

다음의 사용자 플레이스홀더는 IE10이상은 오리지널 플레이스홀더를 사용하고 IE9이하에서만 사용자 플레이스홀더를 지원하도록 합니다.

그리고 IE10이상의 오리지널 플레이스홀더와 같은 기능을 제공하는 것이기 때문에 위에서 언급한 크롬과 같은 플레이스홀더와 다름에 유의바랍니다.

html

<div class="login-box">
  <label for="id" class="lbn-in">아이디</label>
  <input type="text" id="id" class="placeholder" placeholder="아이디" title="아이디" />
</div>

<div class="login-box">
  <label for="pw" class="lbn-in">비밀번호</label>
  <input type="password" id="pw" class="placeholder" placeholder="비밀번호" title="비밀번호" />
</div>

css

.login-box {
    position: relative;z-index: 5;
}
.login-box input {
    display: block;width: 200px;height: 33px;margin-bottom: 5px;padding: 0 10px; color: #666;
    border:1px solid #bbb;border-radius:3px; line-height: 26px;
}
.lbn-in { 
    opacity:0; position: absolute; left: 11px;top: 9px;z-index: 2;font-size: 13px;
    line-height: 15px;color: darkgray;
}
.lt-ie10 .lbn-in {opacity: 1;}

JavaScript

/*  
 * --------------------------------
 * @ Checked Ver.IE Cross Browser
 * --------------------------------
 */
$(function(){
  var UA = navigator.userAgent.toLocaleLowerCase();
  if(UA.indexOf('msie') != -1 || UA.indexOf('trident')) {
    var version = 11;
    UA = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(UA);
    if(UA) version = parseInt(UA[1]);
  }
  
  var classNames = "";
  if(version <= 11) {
    classNames += ' ie';
    classNames += ' ie' + version;
  }
  
  for(var i = version + 1; i <= 11; i++) {
    classNames += ' lt-ie' + i;
  }
  
  document.getElementsByTagName('html')[0].className += classNames;
  
})


/*  
 * --------------------------
 * @ placeholder IE9이하 체크
 * --------------------------
 */

$(function(){
  var ieVerClass = $('html').attr('class');
  if(ieVerClass.indexof('lt-ie10') > -1) {
    init();
  }
})

var $iePlaceholder = null;

function init() {
  $iePlaceholder = $('.placeholder');
  setPlaceholder();
}

function setPlaceholder () {
  $.each($iePlaceholder, function(idx) {
    var $self = $iePlaceholder.eq(idx);
    
    $self.on('focus blur', function(e){
      var $target = $(this),
          $label = $target.siblings('.lbn-in'),
          val = $target.val();
      
      if(e.type == 'focus') {
        $label.hide();
      } else {
        if(val.length > 0) return null;
        else {
          $label.show();
        }
      }
    })
  })
}

리얼 익스플로러 브라우저나 개발자도구의 IE8,9등에서 체크하여 확인바랍니다.

스타일등은 각 디자인에 따라에 변경하여 사용하도록 합니다.

Jaehee's WebClub