浮动标签和占位符

Question

我正在尝试构建带有浮动标签的表单并在IE 10+中工作。 我在标签和输入之间添加了<div class="placeholder"></div>。我想在输入中写一些东西时div 占位符可见并且标签向上滑动。我希望在此联系表格https://redux-form.com/7.2.3/examples/material-ui/的示例中喜欢。我尝试使用:placeholder-shown，但Edge和IE不支持它。

  $('.form-group').each(function(){
      var placeholderInput = $(this).find('.placeholder');
      var inputField = $(this).find('.form-control');
      var labelInput = $(this).find('label');

      $(inputField).focus(function() {
          $(placeholderInput).addClass('visible');       
          $(labelInput).addClass('label--floated');
      });

      $(inputField).on('input', function() {
          $(placeholderInput).removeClass('visible'); 
      });
  });
     $('.form-group .from-control').blur(function() {
        if( !$(this).val() ) {
            $('.placeholder').removeClass('visible');
        }
    });

.placeholder {
    position: absolute;
    opacity: 0;
    color: rgba(0, 0, 0, 0.3);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    bottom: 7px;
    left: 12px;
}
.placeholder.visible {
    opacity: 1;
}
.form-group {
    position: relative;
}

label {
    position: absolute;
    line-height: 22px;
    top: 6px;
    left: 12px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    z-index: 1;
    transform: scale(1) translate(0px, 0px);
    transform-origin: left top 0px;
    pointer-events: none;
    user-select: none;
    color: rgba(0, 0, 0, 0.3);
}
.label--floated {
    top: -20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <form style="padding-top: 40px;">

    <div class="form-group">
        <label>Email:</label>
        <div class="placeholder">email@example.com</div>
        <input type="email" class="form-control" name="email">
    </div>
    <div class="form-group">
        <label>Name:</label>
        <div class="placeholder">J. Doe</div>
        <input type="email" class="form-control" name="email">
    </div>
     <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>