gpt4 book ai didi

angularjs - float 标签不适用于输入类型的电子邮件

转载 作者:行者123 更新时间:2023-11-28 07:15:56 24 4
gpt4 key购买 nike

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

CodePen

对它进行 fork 并对我当前的元素进行了一些修改,但在某些时候发现它不适用于 <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']);

最佳答案

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

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"/>

关于angularjs - float 标签不适用于输入类型的电子邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32358320/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com