Merge pull request #133 from lukepfeiffer10/master

Add config option for default placeholder

Author: lukepfeiffer10

README.md

@@ -65,17 +65,18 @@ Inside of `ui-options`, you can customize these four properties:
 * `clearOnBlur` - default: `true`,
 * `clearOnBlurPlaceholder` - default: `false`,
 * `eventsToHandle` - default: `['input', 'keyup', 'click', 'focus']`
+* `addDefaultPlaceholder` - default: `true`
 
-When customizing `eventsToHandle` or `clearOnBlur`, the value you supply will replace the default. To customize `eventsToHandle`, be sure to replace the entire array.
-
-When setting `clearOnBlurPlaceholder` to `true`, it will show the placeholder text instead of the empty mask. It requires the `ui-mask-placeholder` attribute to be set on the input to display properly.
+When customizing `eventsToHandle`, `clearOnBlur`, or `addDefaultPlaceholder`, the value you supply will replace the default. To customize `eventsToHandle`, be sure to replace the entire array.
 
 Whereas, `maskDefinitions` is an object, so any custom object you supply will be merged together with the defaults using `angular.extend()`. This allows you to override the defaults selectively, if you wish.
 
+When setting `clearOnBlurPlaceholder` to `true`, it will show the placeholder text instead of the empty mask. It requires the `ui-mask-placeholder` attribute to be set on the input to display properly.
+
 #### Global customization
 In addition to customizing behaviors for a specific element, you can also customize the behaviors globally. To do this, simply use the `uiMaskConfig` provider in your app configuration. Example:
 
-```sh
+```javascript
 app.config(['uiMask.ConfigProvider', function(uiMaskConfigProvider) {
   uiMaskConfigProvider.maskDefinitions({'A': /[a-z], '*': /[a-zA-Z0-9]/});
   uiMaskConfigProvider.clearOnBlur(false);
@@ -95,6 +96,9 @@ Allows customizing the mask placeholder when a user has focused the input elemen
 #### uiMaskPlaceholderChar
 Allows customizing the mask placeholder character. The default mask placeholder is `_`.
 
+#### addDefaultPlaceholder
+The default placeholder is constructed from the `ui-mask` definition so a mask of `999-9999` would have a default placeholder of `___-____`; unless you have overridden the default placeholder character.
+
 ## Testing
 
 Most of the testing is done using Karma to run the tests and SauceLabs to provide the different browser environments to test against.

src/mask.js

@@ -10,7 +10,8 @@ angular.module('ui.mask', [])
             },
             clearOnBlur: true,
             clearOnBlurPlaceholder: false,
-            eventsToHandle: ['input', 'keyup', 'click', 'focus']
+            eventsToHandle: ['input', 'keyup', 'click', 'focus'],
+            addDefaultPlaceholder: true
         })
         .provider('uiMask.Config', function() {
             var options = {};
@@ -24,6 +25,9 @@ angular.module('ui.mask', [])
             this.eventsToHandle = function(eventsToHandle) {
                 return options.eventsToHandle = eventsToHandle;
             };
+            this.addDefaultPlaceholder = function(addDefaultPlaceholder) {
+                return options.addDefaultPlaceholder = addDefaultPlaceholder;
+            };
             this.$get = ['uiMaskConfig', function(uiMaskConfig) {
                 var tempOptions = uiMaskConfig;
                 for(var prop in options)
@@ -209,7 +213,7 @@ angular.module('ui.mask', [])
                                 if (iAttrs.maxlength) { // Double maxlength to allow pasting new val at end of mask
                                     iElement.attr('maxlength', maskCaretMap[maskCaretMap.length - 1] * 2);
                                 }
-                                if ( ! originalPlaceholder) {
+                                if ( ! originalPlaceholder && linkOptions.addDefaultPlaceholder) {
                                     iElement.attr('placeholder', maskPlaceholder);
                                 }
                                 var viewValue = controller.$modelValue;

test/maskSpec.js

@@ -584,6 +584,17 @@ describe("uiMask", function () {
       input.triggerHandler("blur");
       expect(input.val()).toBe("f111");
     });
+
+    it("should accept new addDefaultPlaceholder value set per element", function() {
+        scope.options = {
+            addDefaultPlaceholder: false
+        };
+
+        var input = compileElement(inputHtml);
+        scope.$apply("x = ''");
+        scope.$apply("mask = '@999'");
+        expect(input.attr('placeholder')).toBe(undefined);
+    });
   });
 
   describe("blurring", function () {
@@ -683,13 +694,16 @@ describe("uiMask", function () {
       var service = $injector.invoke(uiMaskConfigProvider.$get);
       expect(service.clearOnBlur).toEqual(true);
       expect(service.clearOnBlurPlaceholder).toEqual(false);
+      expect(service.addDefaultPlaceholder).toEqual(true);
     }));
 
     it("should merge default values with configured values", inject(function($injector) {
       uiMaskConfigProvider.clearOnBlur(false);
+      uiMaskConfigProvider.addDefaultPlaceholder(false);
       var service = $injector.invoke(uiMaskConfigProvider.$get);
       expect(service.clearOnBlur).toEqual(false);
       expect(service.clearOnBlurPlaceholder).toEqual(false);
+      expect(service.addDefaultPlaceholder).toEqual(false);
     }));
   });