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();
                        }
                    });
    
                };
            }
        };
    })
    
  • 相关阅读:
    druid spring监控配置
    深入理解Java:SimpleDateFormat安全的时间格式化
    Thread.join()方法
    static 作用
    Java链接SqlServer,学生数据管理面板
    java巅峰作业
    2019.6.12Java/IO data
    Java常用类
    2019.6.5
    java求和运算窗口5.29
  • 原文地址:https://www.cnblogs.com/shih/p/6973074.html
Copyright © 2011-2022 走看看