先上图
看到红色箭头所示,有注意两点:
- 当文本框获得焦点的时候,有一个box-shadow的效果
- 同时会有验证
都知道input是单标签(不闭合)的元素,为了实现这个效果,就需要用到div将input包围起来,如下:
<div ng-class="{focus:myfocus,blur:myblur}">
<label for="uName">
<img src="img/aa.jpg" alt=""/>
</label>
<input type="text";
id="uName";
name="uName";
ng-model="person.name"
ng-focus="myfocus=true;myblur=false;" ;
ng-blur="myfocus=false;myblur=true";
required
ng-maxlength=14
ng-minlength="5"
/>
<div class="error" ng-show="uForm.uName.$dirty && uForm.uName.$invalid">
<small ng-show="uForm.uName.$error.maxlength">最大长度位14</small>
<small ng-show="uForm.uName.$error.minlength">最小长度位5</small>
<small ng-show="uForm.uName.$error.required">必须输入</small>
</div>
</div>
这样的话,结构就成了
<div>
<label></label>
<input type='text'>
<div class='error'></div>
</div>
为了达到获得焦点使父元素具有focus样式,就需要用到angular的ng-class指令
ng-class="{focus:myfocus,blur:myblur}"
同时myfocus/myblur的真假值在input元素中用ng-focus判断
像这样子
ng-focus="myfocus=true;myblur=false";
ng-blur="myfocus=false;myblur=true";
对于表单验证像下面这样
注意required不是ng-required
required
ng-maxlength=14
ng-minlength="5"