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属性

最新文章

热门文章
