angular自定义指令解决IE89不支持input的placeholder属性
下面代码实测通过，直接copy到本地运行即可。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.2.14/angular.min.js"></script>
<style>
.yf-input-container {
position: relative;
font-size: 14px;
margin-bottom: 10px;
} .yf-input-container input {
height: 20px;
line-height: 20px;
}
</style>
</head> <body>
<div ng-controller="superPoolCtrl">
<div class="yf-input-container">
姓名：<input type="text" ng-model="name" yf-placeholder="请输入姓名" />
</div>
<div class="yf-input-container">
电话：<input type="text" ng-model="tel" yf-placeholder="请输入电话" />
</div>
<div>
<div class="yf-input-container">
职位：<input type="text" ng-model="job" yf-placeholder="请输入职位" />
</div>
</div>
</div>
<script>
var moduleName = 'bidmeApp';
var app = angular.module(moduleName, [])
.controller('superPoolCtrl', ['$scope', '$rootScope', '$timeout', function($scope, $rootScope, $timeout) {
$timeout(function() {
$scope.tel = "13800138000";
}, 1000);
$scope.name = "http://www.cnblogs.com/chenchenghua/";
}])
.directive('yfPlaceholder', function() {
return {
restrict: 'A', //指令取属性
scope: false, //与父级共享作用域
replace: true,
require: '',
template: function(elem, attr) {
return '<input />'
},
link: function(scope, element, attr) {
var inputEle = element[0];
var supportPlaceholder = "placeholder" in document.createElement("input") ? true : false;
if(supportPlaceholder) {
inputEle.setAttribute('placeholder', attr.yfPlaceholder);
} else {
function insertAfter(newElement, targetElement) { // newElement是要追加的元素 targetElement 是指定元素的位置
var parent = targetElement.parentNode; // 找到指定元素的父节点
if(parent.lastChild == targetElement) { // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
parent.appendChild(newElement, targetElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
};
};
var node = angular.element(document.createElement('span'));
node.css({
position: 'absolute',
zIndex: '1',
color: '#A9A9A9',
top: inputEle.offsetTop + 'px',
left: inputEle.offsetLeft + 'px',
width: inputEle.offsetWidth + 'px',
height: inputEle.offsetHeight + 'px',
lineHeight: inputEle.offsetHeight + 'px',
textIndent: '5px',
cursor: 'text'
}).text(attr.yfPlaceholder);
angular.element(inputEle).after(node); node.on('click', function(a, b, c) { //点击placeholder，隐藏。input获取焦点
node.css({
"display": 'none'
});
inputEle.focus();
}); angular.element(inputEle).on('blur', function() { //input失去焦点时，做判断
if(inputEle.value.length < 1) {
node.css({
"display": 'block'
});
}
}); angular.element(inputEle).on('focus', function() { //input失去焦点时，做判断
if(inputEle.value.length < 1) {
node.css({
"display": 'none'
});
}
}); scope.$watch(attr.ngModel, function(newVal, oldVal) { //监听，比如开始有值或者异步请求回显，placeholder隐藏
if(!!newVal && newVal.length > 0) {
node.css({
"display": 'none'
});
}
});
}
}
};
});
angular.bootstrap(document.body, [moduleName]);
</script>
</body> </html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
欢迎转载，转载请注明作者：飘飞的夏秋 和出处 http://www.cnblogs.com/chenchenghua/p/6757736.html
angular自定义指令解决IE89不支持input的placeholder属性的更多相关文章
- Angular自定义指令（directive）
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- 让IE下支持Html5的placeholder属性
HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...
- Hmtl5 <input>中placeholder属性（新属性）
Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...
- Angular17 Angular自定义指令
1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...
- 【vuejs深入一】深入学习vue指令，自定义指令解决开发痛点
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...
- 深入学习vue指令，自定义指令解决开发痛点
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code v-model指令 vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- angular自定义指令命名的那个坑
Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...
随机推荐
- am335x uboot启动流程分析
基本指令含义 .globl _start .globl指示告诉汇编器,_start这个符号要被链接器用到,所以要在目标文件的符号表中标记它是一个全局符号 b,bl b是不带返回的跳转 bl带返回的跳 ...
- webpack 打包之后，两行溢出没有效果
原因:发现-webkit-box-orient:vertical;并未设置成功解决:-webkit-box-orient: vertical; 加上注释包裹 .item-title { overflo ...
- J15W-J45W铜截止阀厂家，J15W-J45W铜截止阀价格 - 专题栏目 - 无极资讯网
无极资讯网 首页 最新资讯 最新图集 最新标签 搜索 J15W-J45W铜截止阀 无极资讯网精心为您挑选了(J15W-J45W铜截止阀)信息,其中包含了(J15W-J45W铜截止阀)厂家,(J15 ...
- Python取时间，日期的总结
import datetime from datetime import timedelta now = datetime.datetime.now() #今天 today = now #昨天 yes ...
- Delphi设置表格样式
//设置表格样式wordDoc.Tables.Item(1).Borders.Item(Word.WdBorderType.wdBorderLeft).LineStyle = Word.WdLineS ...
- Web性能优化之雅虎军规
相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...
- linux install tomcat
折腾了好久,按照官网的安装流程安装了不止3次,发现还是不能成功,最终发现是linux机器本身的问题,因为我用的公司的virtual machine,可能是机器本身在一次迁移的过程当中出现了问题,导致了 ...
- c#实现gzip压缩解压缩算法：byte[]字节数组，文件，字符串，数据流的压缩解压缩
转载:https://blog.csdn.net/luanpeng825485697/article/details/78165788 我测试了下压缩byte[],是可以的 using System; ...
- [转]VS清除打开项目时的TFS版本控制提示
本文转自:http://www.cnblogs.com/weixing/p/5219294.html 对于曾经做过TFS版本控制的项目,在版本控制服务不可用的时候,依然会在每次打开项目的时候都提示:当 ...
- vue中echarts随窗体变化
<div id="myChart" :style="{width: '100%', height: '345px'}"></div> & ...