浮动标签不适用于输入类型的电子邮件

Question

您好，我发现以下代码笔正在搜索 Angular 的浮动标签解决方案

CodePen

分叉它并对我当前的项目进行了一些修改，但在某些时候发现它不适用于 <input type="email>" 在该特定属性上。还没想明白为什么，我有点坚持。

它适用于任何其他类型，只是电子邮件不起作用

有人知道为什么会发生这种情况吗？

Pen 不适用于输入类型 EMAIL，但适用于任何其他类型

我将代码放在下面以供参考。

HTML

<div ng-app='myApp' class="container">
  <div class="field">
     <label ng-show="betterField" class="show-hide">Better field</label>
     <input  type="text" class="form-control" ng-model="betterField" placeholder="Better field"/>
    </div>
  <div class="field">
     <label ng-show="betterField2" class="show-hide">Better select</label>
     <select  class="form-control input-sm short-input" ng-model="betterField2" />
       <option value="" disabled >Better select</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
     </select>
   </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 

.container {
  padding-top: 4em;
}

.show-hide.ng-hide-add, 
.show-hide.ng-hide-remove {
    transition: all linear 0.2s;
    display: block!important;
    position: absolute;
}

.show-hide.ng-hide-add.ng-hide-add-active,
.show-hide.ng-hide-remove {
    top: -8px;
    display: block!important;
    position: absolute;
    opacity: 0;
}

.show-hide.ng-hide-add,
.show-hide.ng-hide-remove.ng-hide-remove-active {
    top: -14px;
    opacity: 1;
    display: block!important;
    position: absolute;
}

.field {
    position: relative;
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.field > label {
    position: absolute;
    top: -14px;
    color: #428bca;
    font-size: 0.8em;
}
.field > input {
    border: 0;
    padding: 0.5em 0!important;
    box-shadow: none !important;
    border-radius: 0;;
    border-bottom: 2px solid #555555;
    max-width: 400px;
    margin-top: 15px
}

.short-input {
  max-width: 400px;
  display: block;
}

JavaScript

var myApp = angular.module('myApp', ['ngAnimate']);

Answer 1

编辑：电子邮件字段标签只有在字段中输入有效内容后才可见。如果该字段无效，则不会显示标签。

http://codepen.io/anon/pen/OyPVYX

要创建新字段，您只需确保标签上的 ng-show 值与输入上的 ng-model 值匹配。

<label ng-show="betterEmailField" class="show-hide">Better Email field</label>
 <input  type="email" class="form-control" ng-model="betterEmailField" placeholder="Better Email field"/>