zoukankan      html  css  js  c++  java
  • Angular 1.x 下 兼容IE8 placeholder

    //用法<input placeholder="" ng-model=''>
    .directive('placeholder', function () {
        return {
            restrict: 'A',
            require: '?^ngModel',
            link: function (scope, element, attr) {
                alert(110)
                var scope = scope && scope.$new();
                var validateClass = attr['validateClass'];
                if ('placeholder' in document.createElement('input')) {
                    return;
                }
                var _class = element.attr('class');
                var _id = element.attr('id');
                var _style = element.attr('style');
                var elName = element[0].tagName;
                var tip;
                var copyElement, classFlag;
                element.attr('placeholder', '');
                function load() {
                    if (elName === 'INPUT') {
                        classFlag = 'copy' + Math.floor(Math.random() * 1000000);
                        element.after("<input class='copy " + classFlag + " " + validateClass + " " + _class + "' id='" + _id + "' style='color:#999;" + _style + "' value='" + tip + "' />");
                        copyElement = $("." + classFlag);
                        scope.init();
                    } else if (elName === 'TEXTAREA') {
                        classFlag = 'copy' + Math.floor(Math.random() * 1000000);
                        element.after("<textarea rows=" + attr.rows + " class='copy " + classFlag + " " + _class + "' id='" + _id + "' style='color:#999;" + _style + "' /></textarea>");
                        copyElement = $("." + classFlag);
                        copyElement.val(tip);
                        //指令兼容活动页面,此处select无法监听
                        if (CommonFun.getUrlPara() === 'create') {
                            if (scope.ngModel && (scope.ngModel.type === '单行文本' || scope.ngModel.type === '多行文本')) {
                                element.hide();
                                copyElement.hide();
                            }
                            $('select').change(function () {
                                if ($(this).val() === 0 || $(this).val() === 1) {
                                    // element.hide();
                                    copyElement.hide();
                                } else {
                                    copyElement.show();
                                    element.hide();
                                    copyElement.focus(function () {
                                        copyElement.hide();
                                        element.show();
                                        element.trigger('focus');
                                    });
                                    element.blur(function () {
                                        if (element.val() === "") {
                                            copyElement.show();
                                            element.hide();
                                        }
                                    });
                                }
                            });
                        } else {
                            scope.init();
                        }
                    }
                }
    
                //指令兼容活动页面
                if (scope.ngModel && scope.ngModel.tip !== undefined && scope.ngModel.tip !== null && scope.ngModel.tip !== '' && CommonFun.getUrlPara() !== 'create') {
                    tip = scope.ngModel.tip;
                } else if (scope.ngModel && scope.ngModel.tip === '') {
                    tip = '';
                } else {
                    attr.$observe('placeholder', function (newV) {
                        tip = newV;
                        load();
                    });
                }
    
                scope.init = function () {
                    copyElement.show();
                    element.hide();
                    //监听input值状态
                    scope.$watch(function () { return element.val(); }, function (newV) {
                        if (newV !== null && newV !== undefined && newV.trim() !== "") {
                            copyElement.hide();
                            element.show();
                        } else {
                            copyElement.show();
                            element.hide();
                        }
                    });
                    copyElement && copyElement.focus(function () {
                        copyElement.hide();
                        element.show();
                        element.trigger('focus');
                    });
                    element.blur(function () {
                        if (element.val() === "") {
                            copyElement.show();
                            element.hide();
                        }
                    });
    
                };
            }
        };
    })
    
  • 相关阅读:
    工厂模式简介
    设计模式
    idea的安装与配置及基本用法
    软件架构设计的七大原则
    C#设计模式开启闯关之路
    基础知识详解系列目录
    .Net Core2.2 使用 AutoMapper进行实体转换
    通俗易懂设计模式解析——解释器模式
    通俗易懂设计模式解析——备忘录模式
    通俗易懂设计模式解析——访问者模式
  • 原文地址:https://www.cnblogs.com/shih/p/6973074.html
Copyright © 2011-2022 走看看