add file

MIT-LICENSE.txt

@@ -0,0 +1,21 @@
+Copyright 2014 jQuery Foundation and other contributors
+http://jquery.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,2 +1,15 @@
 # angular-placeholder
-angular-placeholder for ie8 and ie9
+## angular-placeholder for ie8 and ie9
+# Usage:
+#### add file:
+```
+<script type="text/javascript" src="bower_components/angular-placeholder/placeholder-ie.js"></script>
+```
+#### add module 
+```
+angular.module('your module', ['directive']); 
+```
+# Install
+```
+bower install angular-placeholder-ie 
+```

bower.json

@@ -0,0 +1,13 @@
+{
+    "name": "angular-placeholder",
+    "version": "0.0.1",
+    "main": "placeholder-ie.js",
+    "license": "MIT",
+    "ignore": [],
+    "keywords": [
+        "angular",
+        "placeholder",
+        "javascript"
+    ],
+    "homepage": "https://github.com/LinJieLinLin/angular-placeholder"
+}

placeholder-ie.js

@@ -0,0 +1,91 @@
+angular.module('directive', []).directive('placeholder', function() {
+    return {
+        restrict: 'A',
+        require: '?ngModel',
+        link: function(scope, e, attr, ctrl) {
+            try {
+                var str = '<style>.placeholder-style{color: gray;}</style>';
+                if (angular.element('.placeholder-style').length === 0) {
+                    angular.element('head').append(str);
+                }
+                var isIE = function(min, max) {
+                    var navAgent = window.navigator.userAgent.toLowerCase(),
+                        flag;
+                    if (navAgent.indexOf('msie') !== -1) {
+                        var IE = navAgent.match(/msie\s([0-9]*)/);
+                        flag = (arguments.length === 0) ? IE[1] :
+                            (arguments.length === 1) ? (parseInt(IE[1]) === min) :
+                            (IE[1] >= min && IE[1] <= max) ? IE[1] : false;
+                    }
+                    return flag;
+                };
+                if (isIE(8, 9)) {
+                    if (!ctrl.$modelValue && ctrl.$modelValue !== false && ctrl.$modelValue !== 0) {
+                        e.val(attr.placeholder);
+                        e.addClass('placeholder-style');
+                    }
+                    try {
+                        ctrl.$setViewValue();
+                    } catch (err) {}
+                    //对password框的特殊处理
+                    if (attr.type === 'password') {
+                        e.removeClass('placeholder-style');
+                        var temId = new Date().getTime();
+                        e.after('<input id="' + temId +
+                            '" type="text" value="' + attr.placeholder +
+                            '" autocomplete="off" style="' + attr.style +
+                            '" class="' + attr.class +
+                            ' placeholder-style" />');
+                        var pwd = angular.element('#'+temId);
+                        pwd.show();
+                        e.hide();
+
+                        pwd.focus(function() {
+                            pwd.hide();
+                            e.show();
+                            e.focus();
+                        });
+                    }
+                    var isFocus = false;
+                    e.on('focus', function() {
+                        isFocus = true;
+                        if (attr.type === 'password') {
+                            if (!ctrl.$modelValue) {
+                                e.val('');
+                            }
+                        } else {
+                            e.removeClass('placeholder-style');
+                            if (e.val() === attr.placeholder && (!ctrl.$modelValue || ctrl.$modelValue === attr.placeholder)) {
+                                e.val('');
+                            }
+                        }
+                    });
+                    e.on('blur', function() {
+                        isFocus = false;
+                        if (attr.type === 'password') {
+                            if (e.val() === '') {
+                                pwd.show();
+                                e.hide();
+                            }
+                        } else {
+                            if (!e.val() && !ctrl.$modelValue) {
+                                e.val(attr.placeholder);
+                                e.addClass('placeholder-style');
+                            }
+                        }
+                    });
+                    scope.$watch(function() {
+                        return ctrl.$modelValue;
+                    }, function(v) {
+                        if (v) {
+                            e.removeClass('placeholder-style');
+                        } else if (isFocus === false) {
+                            e.val(attr.placeholder);
+                            e.addClass('placeholder-style');
+                        }
+                    });
+                }
+            } catch (err) {}
+        }
+    };
+});