下面代码实测通过，直接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. NEXIQ 125032 USB Link Diesel Truck Diagnose Interface Introduction

    What are the features of nexiq usb link? 1.Compatible with applications that diagnose engines, trans ...

  2. 《大数据日知录》读书笔记-ch1数据分片与路由

    目前主流大数据存储使用横向扩展(scale out)而非传统数据库纵向扩展(scale up)的方式.因此涉及数据分片.数据路由(routing).数据一致性问题 二级映射关系:key-partiti ...

  3. 搭建github静态博客

    github设置 建立新的repository,命名为OwnerName.github.io,例如gotochenglong.github.io git管理 设置ssh密匙 使用命令ssh-keyge ...

  4. (转)合格linux运维人员必会的30道shell编程面试题及讲解

    超深度讲解shell高级编程实战,截至目前shell编程课程国内培训机构最细的课程,不信请看学员表现的水平. 课程牛不牛,不是看老师.课表,而是看培养的的学生水平,目前全免费中伙伴们赶紧看啊. htt ...

  5. unity 工具开发基础

    using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; usin ...

  6. Visual Studio中判断项目的类型

    1. 打开项目的属性,查看Application的Output type

  7. ExtJs6内嵌iframe,nginx部署本地前台文件

    /** * Created by Wwei on 2016/9/1. */ Ext.define('Admin.view.photo.CADMultiUploadForm', { extend: 'E ...

  8. Exists/In/Any/All/Contains操作符

    Exists/In/Any/All/Contains操作符 适用场景:用于判断集合中元素,进一步缩小范围. Any 说明:用于判断集合中是否有元素满足某一条件:不延迟.(若条件为空,则集合只要不为空就 ...

  9. javascript typeof 和 instanceof 的区别和联系

      这篇文章是我看完<JavaScript高级程序设计(第2版)>书籍的随笔文章,目的只有一个,以备自己和网友们方便参考和记忆! typeof是什么?       typeof 是一个操作 ...

  10. Magento 2中文手册教程 - Magento 2 安装流程图

    下图提供了安装Magento 2的安装流程概述: 设置你的服务器环境. 安装magento 2 必备软件, PHP, Apache, MySQL. 系统需求详细信息: 2.1.x 系统需求 获得mag ...