Input box Label in Material Design(label animated to top of the input box when focused)

placeholder 만들기

포커스시 label 숨기기

$(document).ready(function() {
 var placeholderTarget = $('.textbox input[type="text"], .textbox input[type="password"]');

 //포커스시
 placeholderTarget.on('focus', function(){
  $(this).siblings('label').fadeOut('fast');
 });

 //포커스아웃시
 placeholderTarget.on('focusout', function(){
  if($(this).val() == ''){
   $(this).siblings('label').fadeIn('fast');
  }
 });
});

value 값이 이미 설정되어 있는 경우

placeholderTarget.each(function(){
 if(!($(this).val() == '')){
  $(this).siblings('label').css('display','none');
 }
});

Material Design

function materialLabel() {
 $('.matInputW input[type="text"]').on('focus', function(){
  console.log($('.matInputW input[type="text"]').val());
  var label = $(this).siblings('label');
  var labelH = label.height();
  label.stop().animate({
   bottom: labelH + 5,
   fontSize : '12px'
  }, 300).css('color', '#113875');
 }).on('blur', function(){
  var label = $(this).siblings('label');
  if(!$(this).val() == ''){
   $(this).siblings('label').css('color', '#666');
  } else {
   label.stop().animate({
    bottom: '1px',
    fontSize : '14px'
   }, 300).css('color', '#666');
  }
 });
}

placeholder