add support for contenteditable elements

CHANGELOG.md

@@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased][unreleased]
 ### Added
+- enable contenteditable elements for inputmask
 - Update Command object to handle inserts and allow for multiple removes
 - Add a change log
 - Add Component package manager support - component.json 

README.md

@@ -81,7 +81,11 @@ $(document).ready(function(){
    $("#example2").inputmask("Regex");
 });
 ```
+#### Allowed HTML-elements
 
+- input type="text" 
+- input type="tel"
+- div contenteditable="true" (and all others supported by contenteditable, but not tested)
 
 #### Default masking definitions
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.1.62-14",
+  "version": "3.1.62-15",
   "main": [
     "./dist/inputmask/jquery.inputmask.js",
     "./dist/inputmask/jquery.inputmask.extensions.js",

component.json

@@ -2,7 +2,7 @@
     "name": "jquery_inputmask",
     "repository": "robinherbots/jquery.inputmask",
     "description": "jquery.inputmask is a jquery plugin which create an input mask.",
-    "version": "3.1.62-14",
+    "version": "3.1.62-15",
     "keywords": [ "jquery", "plugins", "input", "form", "inputmask", "mask" ],
     "main": "./dist/jquery.inputmask.bundle.js",
     "scripts": [

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "robinherbots/jquery.inputmask",
     "description": "jquery.inputmask is a jquery plugin which create an input mask.",
-	"version": "3.1.62-14",
+	"version": "3.1.62-15",
     "type": "library",
     "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
     "homepage": "http://robinherbots.github.io/jquery.inputmask",

dist/inputmask/jquery.inputmask.date.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./jquery.inputmask" ], factory) : factory(jQuery);

dist/inputmask/jquery.inputmask.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./jquery.inputmask" ], factory) : factory(jQuery);

dist/inputmask/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory(jQuery);
@@ -612,7 +612,8 @@
         function caret(input, begin, end) {
             var range, npt = input.jquery && input.length > 0 ? input[0] : input;
             if ("number" != typeof begin) return npt.setSelectionRange ? (begin = npt.selectionStart, 
-            end = npt.selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(), 
+            end = npt.selectionEnd) : window.getSelection() ? (range = window.getSelection().getRangeAt(0), 
+            range.commonAncestorContainer.parentNode == npt && (begin = range.startOffset, end = range.endOffset)) : document.selection && document.selection.createRange && (range = document.selection.createRange(), 
             begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length), 
             {
                 begin: TranslatePosition(begin),
@@ -621,10 +622,15 @@
             if (begin = TranslatePosition(begin), end = TranslatePosition(end), end = "number" == typeof end ? end : begin, 
             $(npt).is(":visible")) {
                 var scrollCalc = $(npt).css("font-size").replace("px", "") * end;
-                npt.scrollLeft = scrollCalc > npt.scrollWidth ? scrollCalc : 0, androidchrome || 0 != opts.insertMode || begin != end || end++, 
-                npt.setSelectionRange ? (npt.selectionStart = begin, npt.selectionEnd = end) : npt.createTextRange && (range = npt.createTextRange(), 
-                range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin), 
-                range.select());
+                if (npt.scrollLeft = scrollCalc > npt.scrollWidth ? scrollCalc : 0, androidchrome || 0 != opts.insertMode || begin != end || end++, 
+                npt.setSelectionRange) npt.selectionStart = begin, npt.selectionEnd = end; else if (window.getSelection()) {
+                    range = document.createRange(), range.setStart(npt.firstChild, begin < npt._valueGet().length ? begin : npt._valueGet().length), 
+                    range.setEnd(npt.firstChild, end < npt._valueGet().length ? end : npt._valueGet().length), 
+                    range.collapse(!0);
+                    var sel = window.getSelection();
+                    sel.removeAllRanges(), sel.addRange(range);
+                } else npt.createTextRange && (range = npt.createTextRange(), range.collapse(!0), 
+                range.moveEnd("character", end), range.moveStart("character", begin), range.select());
             }
         }
         function determineLastRequiredPosition(returnDefinition) {
@@ -757,10 +763,14 @@
             }
             var valueGet, valueSet;
             if (!npt._valueGet) {
-                if (Object.getOwnPropertyDescriptor) {
-                    Object.getOwnPropertyDescriptor(npt, "value");
-                }
-                document.__lookupGetter__ && npt.__lookupGetter__("value") ? (valueGet = npt.__lookupGetter__("value"), 
+                Object.getOwnPropertyDescriptor && void 0 == npt.value && npt.isContentEditable ? (valueGet = function() {
+                    return this.textContent;
+                }, valueSet = function(value) {
+                    this.textContent = value;
+                }, Object.defineProperty(npt, "value", {
+                    get: getter,
+                    set: setter
+                })) : document.__lookupGetter__ && npt.__lookupGetter__("value") ? (valueGet = npt.__lookupGetter__("value"), 
                 valueSet = npt.__lookupSetter__("value"), npt.__defineGetter__("value", getter), 
                 npt.__defineSetter__("value", setter)) : (valueGet = function() {
                     return npt.value;
@@ -914,7 +924,7 @@
         }
         function compositionEndEvent() {}
         function mask(el) {
-            if ($el = $(el), $el.is(":input") && isInputTypeSupported($el.attr("type"))) {
+            if ($el = $(el), $el.is(":input") && isInputTypeSupported($el.attr("type")) || el.isContentEditable) {
                 if ($el.data("_inputmask", {
                     maskset: maskset,
                     opts: opts,

dist/inputmask/jquery.inputmask.numeric.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./jquery.inputmask" ], factory) : factory(jQuery);

dist/inputmask/jquery.inputmask.phone.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./jquery.inputmask" ], factory) : factory(jQuery);

dist/inputmask/jquery.inputmask.regex.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./jquery.inputmask" ], factory) : factory(jQuery);

dist/jquery.inputmask.bundle.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.62-14
+* Version: 3.1.62-15
 */
 !function($) {
     function isInputEventSupported(eventName) {
@@ -610,7 +610,8 @@
         function caret(input, begin, end) {
             var range, npt = input.jquery && input.length > 0 ? input[0] : input;
             if ("number" != typeof begin) return npt.setSelectionRange ? (begin = npt.selectionStart, 
-            end = npt.selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(), 
+            end = npt.selectionEnd) : window.getSelection() ? (range = window.getSelection().getRangeAt(0), 
+            range.commonAncestorContainer.parentNode == npt && (begin = range.startOffset, end = range.endOffset)) : document.selection && document.selection.createRange && (range = document.selection.createRange(), 
             begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length), 
             {
                 begin: TranslatePosition(begin),
@@ -619,10 +620,15 @@
             if (begin = TranslatePosition(begin), end = TranslatePosition(end), end = "number" == typeof end ? end : begin, 
             $(npt).is(":visible")) {
                 var scrollCalc = $(npt).css("font-size").replace("px", "") * end;
-                npt.scrollLeft = scrollCalc > npt.scrollWidth ? scrollCalc : 0, androidchrome || 0 != opts.insertMode || begin != end || end++, 
-                npt.setSelectionRange ? (npt.selectionStart = begin, npt.selectionEnd = end) : npt.createTextRange && (range = npt.createTextRange(), 
-                range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin), 
-                range.select());
+                if (npt.scrollLeft = scrollCalc > npt.scrollWidth ? scrollCalc : 0, androidchrome || 0 != opts.insertMode || begin != end || end++, 
+                npt.setSelectionRange) npt.selectionStart = begin, npt.selectionEnd = end; else if (window.getSelection()) {
+                    range = document.createRange(), range.setStart(npt.firstChild, begin < npt._valueGet().length ? begin : npt._valueGet().length), 
+                    range.setEnd(npt.firstChild, end < npt._valueGet().length ? end : npt._valueGet().length), 
+                    range.collapse(!0);
+                    var sel = window.getSelection();
+                    sel.removeAllRanges(), sel.addRange(range);
+                } else npt.createTextRange && (range = npt.createTextRange(), range.collapse(!0), 
+                range.moveEnd("character", end), range.moveStart("character", begin), range.select());
             }
         }
         function determineLastRequiredPosition(returnDefinition) {
@@ -755,10 +761,14 @@
             }
             var valueGet, valueSet;
             if (!npt._valueGet) {
-                if (Object.getOwnPropertyDescriptor) {
-                    Object.getOwnPropertyDescriptor(npt, "value");
-                }
-                document.__lookupGetter__ && npt.__lookupGetter__("value") ? (valueGet = npt.__lookupGetter__("value"), 
+                Object.getOwnPropertyDescriptor && void 0 == npt.value && npt.isContentEditable ? (valueGet = function() {
+                    return this.textContent;
+                }, valueSet = function(value) {
+                    this.textContent = value;
+                }, Object.defineProperty(npt, "value", {
+                    get: getter,
+                    set: setter
+                })) : document.__lookupGetter__ && npt.__lookupGetter__("value") ? (valueGet = npt.__lookupGetter__("value"), 
                 valueSet = npt.__lookupSetter__("value"), npt.__defineGetter__("value", getter), 
                 npt.__defineSetter__("value", setter)) : (valueGet = function() {
                     return npt.value;
@@ -912,7 +922,7 @@
         }
         function compositionEndEvent() {}
         function mask(el) {
-            if ($el = $(el), $el.is(":input") && isInputTypeSupported($el.attr("type"))) {
+            if ($el = $(el), $el.is(":input") && isInputTypeSupported($el.attr("type")) || el.isContentEditable) {
                 if ($el.data("_inputmask", {
                     maskset: maskset,
                     opts: opts,

js/jquery.inputmask.js

@@ -1091,6 +1091,7 @@
                 }
                 return pos;
             }
+
             function caret(input, begin, end) {
                 var npt = input.jquery && input.length > 0 ? input[0] : input, range;
                 if (typeof begin == 'number') {
@@ -1098,7 +1099,9 @@
                     end = TranslatePosition(end);
                     end = (typeof end == 'number') ? end : begin;
 
-                    if (!$(npt).is(":visible")) { return; }
+                    if (!$(npt).is(":visible")) {
+                        return;
+                    }
 
                     var scrollCalc = $(npt).css("font-size").replace("px", "") * end;
                     npt.scrollLeft = scrollCalc > npt.scrollWidth ? scrollCalc : 0;
@@ -1106,17 +1109,33 @@
                     if (npt.setSelectionRange) {
                         npt.selectionStart = begin;
                         npt.selectionEnd = end;
+                    } else if (window.getSelection()) {
+                        range = document.createRange();
+                        range.setStart(npt.firstChild, begin < npt._valueGet().length ? begin : npt._valueGet().length);
+                        range.setEnd(npt.firstChild, end < npt._valueGet().length ? end : npt._valueGet().length);
+                        range.collapse(true);
+                        var sel = window.getSelection();
+                        sel.removeAllRanges();
+                        sel.addRange(range);
+                        //npt.focus();
                     } else if (npt.createTextRange) {
                         range = npt.createTextRange();
                         range.collapse(true);
                         range.moveEnd('character', end);
                         range.moveStart('character', begin);
                         range.select();
+
                     }
                 } else {
                     if (npt.setSelectionRange) {
                         begin = npt.selectionStart;
                         end = npt.selectionEnd;
+                    } else if (window.getSelection()) {
+                        range = window.getSelection().getRangeAt(0);
+                        if (range.commonAncestorContainer.parentNode == npt) {
+                            begin = range.startOffset;
+                            end = range.endOffset;
+                        }
                     } else if (document.selection && document.selection.createRange) {
                         range = document.selection.createRange();
                         begin = 0 - range.duplicate().moveStart('character', -100000);
@@ -1306,10 +1325,20 @@
                 }
 
                 if (!npt._valueGet) {
-                    //var valueProperty;
-                    if (Object.getOwnPropertyDescriptor)
-                        var valueProperty = Object.getOwnPropertyDescriptor(npt, "value");
-                    if (valueProperty && valueProperty.configurable && false) { //experimental for chrome
+                    var valueProperty;
+                    if (Object.getOwnPropertyDescriptor && npt.value == undefined && npt.isContentEditable) {
+                        valueGet = function () {
+                            return this.textContent;
+                        }
+                        valueSet = function (value) {
+                            this.textContent = value;
+                        }
+
+                        Object.defineProperty(npt, "value", {
+                            get: getter,
+                            set: setter
+                        });
+                    } else if ((valueProperty = (Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(npt, "value"))) && valueProperty.configurable && false) { //experimental for chrome
                         npt._value = valueProperty.value;
                         valueGet = function () {
                             return this._value || "";
@@ -1651,7 +1680,7 @@
             }
             function mask(el) {
                 $el = $(el);
-                if ($el.is(":input") && isInputTypeSupported($el.attr("type"))) {
+                if (($el.is(":input") && isInputTypeSupported($el.attr("type"))) || el.isContentEditable) {
                     //store tests & original buffer in the input element - used to get the unmasked value
                     $el.data('_inputmask', {
                         'maskset': maskset,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.1.62-14",
+  "version": "3.1.62-15",
   "description": "jquery.inputmask is a jquery plugin which create an input mask.",
   "main": "./dist/inputmask/jquery.inputmask.js",
   "scripts": {