input text with animation label

input text에 focus 됬을때 label이 애니메이션 되는 효과, input이 모두 채워졌을때 button에 active 효과

 

See the Pen input text with animation label by publisher.kim (@publisherkim) on CodePen.

 

html

<div class="form_wrap">
    <ul class="form_list">
      <li>
        <div class="form_group">
          <label class="form_label" for="input1">이름</label>
          <input type="text" class="text" id="input1" placeholder="이름을 입력하세요.">
        </div>
      </li>
      <li>
        <div class="form_group">
          <label class="form_label" for="input2">휴대폰번호</label>
          <input type="number" class="text" id="input2" placeholder="휴대폰번호(-없이 입력하세요.)">
        </div>
      </li>
      <li>
        <div class="form_group">
          <label class="form_label" for="input3">고정값</label>
          <input type="text" class="text" id="input3" placeholder="고정값" value="고정값" readonly>
        </div>
      </li>
      <li>
        <div class="form_group">
          <label class="form_label" for="input4">샘플타이틀</label>
          <input type="text" class="text" id="input4" placeholder="모든 input이 값을 가지게 되면 버튼 색상이 바뀝니다.">
        </div>
      </li>
    </ul>
    <button class="btn">확인</button>
  </div>

 

css

.form_wrap{width:500px; margin:0 auto;}
.form_list li + li{margin-top:7px;}
.form_wrap .btn{line-height: 58px;height: 60px;width: 100%;font-size: 20px;font-weight: 600;border-radius: 10px;margin-top: 20px;opacity:0.6;position:relative;z-index: -1; border:2px solid #8D8E8E; background:#8D8E8E; color:#fff; cursor:pointer;}
.form_wrap .btn::after{content:'';display: block;width:100%;position: absolute;left:0;top:0;z-index: 9999;}
.form_wrap .btn.active{background:#2077d9;border-color:#2077d9;opacity:1;z-index: 99;}
.form_wrap .btn.active::after{display:none;}

.form_group{position:relative;}
.form_group .text {width: 100%;height: 70px;border: 2px solid #d3d5e0; border-radius:10px; font-size: 17px;padding: 0 20px;   }
.form_group .text::-webkit-inner-spin-button{appearance: none;-moz-appearance: none; -webkit-appearance: none;}
.form_group .text:focus{border-color:#2077d9; padding-top:10px; outline:none;}

.form_group .text:focus::placeholder{opacity:0;}
.form_group .text[readonly]{background:#f1f1f1;}
.form_group .text[readonly]:focus{border-color:#d3d5e0;}
.form_group .form_label {position: absolute;left: 22px;top: 28px;z-index: 10;color: #999999;font-size:20px;transition: transform 150ms ease-out, font-size 150ms ease-out;font-weight: 300;opacity:0;}
.form_group.focused .form_label, 
.form_group.fixed .form_label, 
.form_group.disabled .form_label { opacity:1; transform: translate(0px, -100%); font-size: 14px; font-weight: 900; color:#373636;}
.form_group.focused .text,
.form_group.fixed .text,
.form_group.disabled .text{padding-top: 21px;}

 

js *jquery 필요

// input focus and blur event
function inputchk() {
    var inputValue = $(this).val();
    if (inputValue == "") {
      //값이 없을때
      $(this).parents('.form_group').removeClass('fixed');
      $(this).parents('.form_group').removeClass('focused');
    } else {
      //값이 있을때
      $(this).parents('.form_group').removeClass('focused');
      $(this).parents('.form_group').addClass('fixed');
    }
  }

$('.form_group input').each(function() {
    inputchk.call(this);
  })

$('.form_group input').focus(function() {
    $(this).parents('.form_group').addClass('focused');
  });

  $('.form_group input').blur(function() {
    inputchk.call(this);
  })

// form_list input all filled event
function checkInputs() {
    var allFilled1 = true;
    $(".form_list .text").each(function() {
      if ($(this).val() === '') {
          allFilled1 = false;
          return false;
        }
    });
    return { allFilled1: allFilled1};
  }
  $(".form_list .text").on('input change', function() {
    var result = checkInputs();
    if (result.allFilled1) {
      $('.btn').addClass("active");
    } else {
      $('.btn').removeClass("active");
    }
  });