最近项目开发的时候遇到一个头疼的问题，在测试IE兼容性的时候，发现placeholder在IE下无效。查网上说也是有各种解决方案，但是都不是我想要的，于是决定自己写一个。思路：placeHolder是一个提示性的文字 ，我们完全可以用Span元素来达到这个效果。当用户点击Input的时候隐藏Span，失去焦点的时候Blur一下，恢复Span。但是要考虑到默认有内容的情况，这个时候加一个指令判断开关，有内容就不显示Span。
具体指令如下：
define(['angular'], function(){ var commonDirectives = angular.module("commonDirectives", []); commonDirectives.directive('pHolder', [function () {
return {
restrict: 'AE',
scope: {
inputid:'@', //指定input的id
content:'@', //placeholder的内容
tops:'@', //绝对定位的相对上边距值
lefts:'@', //绝对定位的相对左边距值
setp:'@' //初始控制显示隐藏
},
replace:true,
template: '<span ng-show="plaShow" style="top:{{tops}}px;left:{{lefts}}px;" class="placeHolder-text" >{{content}}</span>',
link: function (scope, ele, attr) {
//has text ?
if(!scope.setp){
scope.plaShow = true;
}else{
scope.plaShow = false;
}
var tag = $("#"+scope.inputid);
$(ele[0]).on('click',function(e){
scope.$apply(function(){
return scope.plaShow = false;
})
$("#"+scope.inputid).focus();
})
$("#"+scope.inputid).on('click',function(e){
scope.$apply(function(){
return scope.plaShow = false;
})
})
$("#"+scope.inputid).blur(function(){
if($(this).val() == ""){
scope.$apply(function(){
return scope.plaShow = true;
})
}
}
}
};
}]) })