fix autofill for colormask

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "4.0.0-beta.19",
+  "version": "4.0.0-beta.20",
   "main": [
 	  "./dist/inputmask/inputmask.js",
 	  "./dist/inputmask/inputmask.extensions.js",

component.json

@@ -2,7 +2,7 @@
 	"name": "inputmask",
 	"repository": "robinherbots/Inputmask",
 	"description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
-	"version": "4.0.0-beta.19",
+	"version": "4.0.0-beta.20",
 	"keywords": [
 		"jquery",
 		"plugins",

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "robinherbots/inputmask",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
-  "version": "4.0.0-beta.19",
+  "version": "4.0.0-beta.20",
   "type": "library",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "homepage": "http://robinherbots.github.io/Inputmask",

css/inputmask.css

@@ -27,11 +27,13 @@ div.im-colormask {
     cursor: text;
 }
 
-div.im-colormask > input {
+div.im-colormask > input, div.im-colormask > input:-webkit-autofill {
     position: absolute !important;
     display: inline-block;
     background-color: transparent;
     color: transparent;
+    -webkit-text-fill-color: transparent;
+    transition: background-color 5000s ease-in-out 0s;
     caret-color: transparent;
     appearance: caret;
     border-style: none;
@@ -42,13 +44,18 @@ div.im-colormask > input:focus {
     outline: none;
 }
 
-div.im-colormask > input::selection{
+div.im-colormask > input::selection {
     background: none;
 }
-div.im-colormask > input::-moz-selection{
+
+div.im-colormask > input::-moz-selection {
     background: none;
 }
 
+div.im-colormask > input:-webkit-autofill ~ div {
+    background-color:  rgb(250, 255, 189);
+}
+
 div.im-colormask > div {
     color: black;
     display: inline-block;

dist/inputmask/bindings/inputmask.binding.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/dependencyLibs/inputmask.dependencyLib.jqlite.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/dependencyLibs/inputmask.dependencyLib.jquery.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/dependencyLibs/inputmask.dependencyLib.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/global/document.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 "function" == typeof define && define.amd ? define(function() {

dist/inputmask/global/window.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 "function" == typeof define && define.amd ? define(function() {

dist/inputmask/inputmask.date.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/inputmask.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/inputmask.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {
@@ -995,12 +995,12 @@
             template.style.width = computedStyle.width, template.style.textAlign = computedStyle.textAlign, 
             colorMask = document.createElement("div"), input.inputmask.colorMask = colorMask, 
             colorMask.className = "im-colormask", input.parentNode.insertBefore(colorMask, input), 
-            input.parentNode.removeChild(input), colorMask.appendChild(template), colorMask.appendChild(input), 
+            input.parentNode.removeChild(input), colorMask.appendChild(input), colorMask.appendChild(template), 
             input.style.left = template.offsetLeft + "px", $(colorMask).on("mouseleave", function(e) {
                 return EventHandlers.mouseleaveEvent.call(input, [ e ]);
             }), $(colorMask).on("mouseenter", function(e) {
                 return EventHandlers.mouseenterEvent.call(input, [ e ]);
-            }), $(input).on("click", function(e) {
+            }), $(colorMask).on("click", function(e) {
                 return caret(input, function(clientx) {
                     var caretPos, e = document.createElement("span");
                     for (var style in computedStyle) isNaN(style) && -1 !== style.indexOf("font") && (e.style[style] = computedStyle[style]);

dist/inputmask/inputmask.numeric.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/inputmask.phone.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-be.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-ca.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-hu.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-mx.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-nl.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-ru.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-uk.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(factory) {

dist/jquery.inputmask.bundle.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(modules) {
@@ -1035,12 +1035,12 @@
                 template.style.width = computedStyle.width, template.style.textAlign = computedStyle.textAlign, 
                 colorMask = document.createElement("div"), input.inputmask.colorMask = colorMask, 
                 colorMask.className = "im-colormask", input.parentNode.insertBefore(colorMask, input), 
-                input.parentNode.removeChild(input), colorMask.appendChild(template), colorMask.appendChild(input), 
+                input.parentNode.removeChild(input), colorMask.appendChild(input), colorMask.appendChild(template), 
                 input.style.left = template.offsetLeft + "px", $(colorMask).on("mouseleave", function(e) {
                     return EventHandlers.mouseleaveEvent.call(input, [ e ]);
                 }), $(colorMask).on("mouseenter", function(e) {
                     return EventHandlers.mouseenterEvent.call(input, [ e ]);
-                }), $(input).on("click", function(e) {
+                }), $(colorMask).on("click", function(e) {
                     return caret(input, function(clientx) {
                         var caretPos, e = document.createElement("span");
                         for (var style in computedStyle) isNaN(style) && -1 !== style.indexOf("font") && (e.style[style] = computedStyle[style]);

dist/min/inputmask/dependencyLibs/inputmask.dependencyLib.jquery.min.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 !function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):window.dependencyLib=e(jQuery)}(function(e){return e});

dist/min/inputmask/global/document.min.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 "function"==typeof define&&define.amd?define(function(){return document}):"object"==typeof exports&&(module.exports=document);

dist/min/inputmask/global/window.min.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2018 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.0-beta.19
+* Version: 4.0.0-beta.20
 */
 
 "function"==typeof define&&define.amd?define(function(){return window}):"object"==typeof exports&&(module.exports=window);

js/inputmask.js

@@ -2819,8 +2819,8 @@
                 colorMask.className = "im-colormask";
                 input.parentNode.insertBefore(colorMask, input);
                 input.parentNode.removeChild(input);
-                colorMask.appendChild(template);
                 colorMask.appendChild(input);
+                colorMask.appendChild(template);
                 input.style.left = template.offsetLeft + "px";
 
                 $(colorMask).on("mouseleave", function (e) {
@@ -2829,7 +2829,7 @@
                 $(colorMask).on("mouseenter", function (e) {
                     return EventHandlers.mouseenterEvent.call(input, [e]);
                 });
-                $(input).on("click", function (e) {
+                $(colorMask).on("click", function (e) {
                     caret(input, findCaretPos(e.clientX));
                     return EventHandlers.clickEvent.call(input, [e]);
                 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "4.0.0-beta.19",
+  "version": "4.0.0-beta.20",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
   "main": "index.js",
   "files": [