下面代码实测通过，直接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属性的更多相关文章

  1. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. 让IE下支持Html5的placeholder属性

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...

  4. Hmtl5 <input>中placeholder属性（新属性）

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

  5. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  6. 【vuejs深入一】深入学习vue指令，自定义指令解决开发痛点

    写在前面  一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...

  7. 深入学习vue指令，自定义指令解决开发痛点

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code v-model指令 vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升 ...

  8. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  9. angular自定义指令命名的那个坑

    Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...

随机推荐

  1. Html checkbox全选

    html中全选 <table class="data-table td-center"> <tr> <td><input type=&qu ...

  2. python3.6 for pygame安装

    首先下载好文件: pygame下载网址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame 找到pygame-1.9.2b8-cp36-cp36m-wi ...

  3. Java 覆写初探

    Java 覆写 继承性的主要特征是子类可以根据父类已有的功能进行功能扩展,但是在子类定义属性或方法的时候有可能定义属性和方法和父类同名,在此类情况下就称为:“覆写”. 方法的覆写:[改良原本功能不足的 ...

  4. 一些学习比较好的网站，及es6学习好网站，前端用的相关库，及知道的插件

    图形可视化:d3js  echarts https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects ...

  5. Oracle 数据表的管理

    1.创建表的的表名规则 a.必须已字母开头 b.长度不能超过30 c.不能是Oracle的保留字 d.只能使用如下字符:A-Z.a-z.1-9.#,$等 2.Oracle基本数据类型 2.1 字符型数 ...

  6. 006-动态生成验证码Servlet代码模板

    package checking; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java ...

  7. 011-filter模板

    1 模板一 package ${enclosing_package}; import java.io.IOException; import javax.servlet.FilterChain; im ...

  8. HTTP 状态代码之汇总+理解

    这里有百度百科的介绍,还挺全的. 下面是在开发过程中遇到过的各种码,自己的问题自己的原因,同码不同错,贱笑贱笑. HTTP 406 Not Acceptable 这个错误的原因,是由于框架使用了`Sp ...

  9. 更好的理解MVC

    mvc除了将数据层和逻辑层分离外,还有更好的优化了代码结构 m只和c交互,v也只和c交互,m与v的交互需要通过c,一共只用考虑4条路 如果不是这样的话,m v c需要考虑和每个人交互,那么就是要考虑 ...

  10. WPF的DatePicker--日期选择器

    1. 日期选择器 DatePicker, 如图: 点击打开后显示如下: 2. 关键属性 SelectedDate SelectedDate属性, DateTime? 类型(可为空的DateTime类型 ...