Browse Source

Add showMaskOnHover option

Robin Herbots 13 years ago
parent
commit
8070a66e6d
2 changed files with 21 additions and 3 deletions
  1. 9 0
      README.md
  2. 12 3
      js/jquery.inputmask.js

+ 9 - 0
README.md

@@ -304,6 +304,15 @@ $(document).ready(function(){
    else validateValue(val); 
    else validateValue(val); 
 });
 });
 ```
 ```
+### showMaskOnHover
+
+Shows the mask when hovering the mouse. (default = true)
+
+```javascript
+$(document).ready(function(){
+    $("#ssn").inputmask("999-99-9999",{ showMaskOnHover: true }); //default
+});
+```
 
 
 ## Supported markup options
 ## Supported markup options
 ### RTL attribute
 ### RTL attribute

+ 12 - 3
js/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2012 Robin Herbots
 * Copyright (c) 2010 - 2012 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 1.0.26
+* Version: 1.0.27
 */
 */
 
 
 (function ($) {
 (function ($) {
@@ -30,6 +30,7 @@
                 aliases: {}, //aliases definitions => see jquery.inputmask.extensions.js
                 aliases: {}, //aliases definitions => see jquery.inputmask.extensions.js
                 onKeyUp: $.noop, //override to implement autocomplete on certain keys for example
                 onKeyUp: $.noop, //override to implement autocomplete on certain keys for example
                 onKeyDown: $.noop, //override to implement autocomplete on certain keys for example
                 onKeyDown: $.noop, //override to implement autocomplete on certain keys for example
+                showMaskOnHover: true, //show the mask-placeholder when hovering the empty input
                 //numeric basic properties
                 //numeric basic properties
                 numericInput: false, //numericInput input direction style (input shifts to the left while holding the caret position)
                 numericInput: false, //numericInput input direction style (input shifts to the left while holding the caret position)
                 radixPoint: ".", // | ","
                 radixPoint: ".", // | ","
@@ -581,7 +582,7 @@
                 //bind events
                 //bind events
                 $input.bind("mouseenter.inputmask", function () {
                 $input.bind("mouseenter.inputmask", function () {
                     var $input = $(this), input = this;
                     var $input = $(this), input = this;
-                    if (!$input.hasClass('focus.inputmask')) {
+                    if (!$input.hasClass('focus.inputmask') && opts.showMaskOnHover) {
                         var nptL = input._valueGet().length;
                         var nptL = input._valueGet().length;
                         if (nptL == 0) {
                         if (nptL == 0) {
                             buffer = _buffer.slice();
                             buffer = _buffer.slice();
@@ -615,13 +616,21 @@
                     }
                     }
                 }).bind("focus.inputmask", function () {
                 }).bind("focus.inputmask", function () {
                     var $input = $(this), input = this;
                     var $input = $(this), input = this;
+                    if (!$input.hasClass('focus.inputmask') && !opts.showMaskOnHover) {
+                        var nptL = input._valueGet().length;
+                        if (nptL == 0) {
+                            buffer = _buffer.slice();
+                            writeBuffer(input, buffer);
+                        } else if (nptL < buffer.length)
+                            writeBuffer(input, buffer);
+                    }
                     $input.addClass('focus.inputmask');
                     $input.addClass('focus.inputmask');
                     undoBuffer = input._valueGet();
                     undoBuffer = input._valueGet();
                 }).bind("mouseleave.inputmask", function () {
                 }).bind("mouseleave.inputmask", function () {
                     var $input = $(this), input = this;
                     var $input = $(this), input = this;
                     if (opts.clearMaskOnLostFocus) {
                     if (opts.clearMaskOnLostFocus) {
                         if (!$input.hasClass('focus.inputmask')) {
                         if (!$input.hasClass('focus.inputmask')) {
-                            if (input._valueGet() == _buffer.join(''))
+                            if (input._valueGet() == _buffer.join('') || input._valueGet() == '')
                                 input._valueSet('');
                                 input._valueSet('');
                             else { //clearout optional tail of the mask
                             else { //clearout optional tail of the mask
                                 clearOptionalTail(input, buffer);
                                 clearOptionalTail(input, buffer);