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();
                        }
                    });
    
                };
            }
        };
    })
    
  • 相关阅读:
    让android系统中任意一个view变成进度条
    AIDL(2):服务端回调客户端
    java 简单的des加密示例
    java中的集合:继承关系和简介
    java中的线程(4):常用同步类 CountDownLatch、CyclicBarrier和Semaphore
    java中的线程(3):线程池类 ThreadPoolExecutor「线程池的类型、参数、扩展等」
    java中的线程(2):如何正确停止线程之2种常见停止方式
    java中的线程(1):如何正确停止线程Why Are Thread.stop, Thread.suspend, Thread.resume and Runtime.runFinalizersOnExit Deprecated?
    android上最多有多少个http连接?
    采用MQTT协议实现android消息推送(4)选fusesource-mqtt-client为客户端
  • 原文地址:https://www.cnblogs.com/shih/p/6973074.html
Copyright © 2011-2022 走看看