[ISSUE-397] Add swapHiddenInput option

nosir · Apr 1, 2020 · c6e850b · c6e850b
1 parent 3945082
commit c6e850b
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 9 deletions.
diff --git a/dist/cleave-angular.js b/dist/cleave-angular.js
@@ -120,6 +120,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        owner.onCutListener = owner.onCut.bind(owner);
 	        owner.onCopyListener = owner.onCopy.bind(owner);
 
+	        owner.initSwapHiddenInput();
+
 	        owner.element.addEventListener('input', owner.onChangeListener);
 	        owner.element.addEventListener('keydown', owner.onKeyDownListener);
 	        owner.element.addEventListener('focus', owner.onFocusListener);
@@ -139,6 +141,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	    },
 
+	    initSwapHiddenInput: function () {
+	        var owner = this, pps = owner.properties;
+	        if (!pps.swapHiddenInput) return;
+
+	        var inputFormatter = owner.element.cloneNode(true);
+	        owner.element.parentNode.insertBefore(inputFormatter, owner.element);
+
+	        owner.elementSwapHidden = owner.element;
+	        owner.elementSwapHidden.type = 'hidden';
+
+	        owner.element = inputFormatter;
+	        owner.element.id = '';
+	    },
+
 	    initNumeralFormatter: function () {
 	        var owner = this, pps = owner.properties;
 
@@ -430,6 +446,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        owner.element.value = newValue;
+	        if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue();
+
 	        Util.setSelection(owner.element, endPos, pps.document, false);
 	        owner.callOnValueChanged();
 	    },
@@ -1649,6 +1667,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.tailPrefix = !!opts.tailPrefix;
 
 	        // others
+	        target.swapHiddenInput = !!opts.swapHiddenInput;
+
 	        target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
 	        target.uppercase = !!opts.uppercase;

diff --git a/dist/cleave-angular.min.js b/dist/cleave-angular.min.js
diff --git a/dist/cleave-esm.js b/dist/cleave-esm.js
@@ -1006,6 +1006,8 @@ var DefaultProperties = {
         target.tailPrefix = !!opts.tailPrefix;
 
         // others
+        target.swapHiddenInput = !!opts.swapHiddenInput;
+
         target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
         target.uppercase = !!opts.uppercase;
@@ -1113,6 +1115,8 @@ Cleave.prototype = {
         owner.onCutListener = owner.onCut.bind(owner);
         owner.onCopyListener = owner.onCopy.bind(owner);
 
+        owner.initSwapHiddenInput();
+
         owner.element.addEventListener('input', owner.onChangeListener);
         owner.element.addEventListener('keydown', owner.onKeyDownListener);
         owner.element.addEventListener('focus', owner.onFocusListener);
@@ -1132,6 +1136,20 @@ Cleave.prototype = {
         }
     },
 
+    initSwapHiddenInput: function () {
+        var owner = this, pps = owner.properties;
+        if (!pps.swapHiddenInput) return;
+
+        var inputFormatter = owner.element.cloneNode(true);
+        owner.element.parentNode.insertBefore(inputFormatter, owner.element);
+
+        owner.elementSwapHidden = owner.element;
+        owner.elementSwapHidden.type = 'hidden';
+
+        owner.element = inputFormatter;
+        owner.element.id = '';
+    },
+
     initNumeralFormatter: function () {
         var owner = this, pps = owner.properties;
 
@@ -1423,6 +1441,8 @@ Cleave.prototype = {
         }
 
         owner.element.value = newValue;
+        if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue();
+
         Util.setSelection(owner.element, endPos, pps.document, false);
         owner.callOnValueChanged();
     },

diff --git a/dist/cleave-esm.min.js b/dist/cleave-esm.min.js
diff --git a/dist/cleave-react-node.js b/dist/cleave-react-node.js
@@ -2839,6 +2839,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.tailPrefix = !!opts.tailPrefix;
 
 	        // others
+	        target.swapHiddenInput = !!opts.swapHiddenInput;
+
 	        target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
 	        target.uppercase = !!opts.uppercase;

diff --git a/dist/cleave-react-node.min.js b/dist/cleave-react-node.min.js
diff --git a/dist/cleave-react.js b/dist/cleave-react.js
@@ -3033,6 +3033,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.tailPrefix = !!opts.tailPrefix;
 
 	        // others
+	        target.swapHiddenInput = !!opts.swapHiddenInput;
+
 	        target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
 	        target.uppercase = !!opts.uppercase;

diff --git a/dist/cleave-react.min.js b/dist/cleave-react.min.js
diff --git a/dist/cleave.js b/dist/cleave.js
@@ -120,6 +120,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        owner.onCutListener = owner.onCut.bind(owner);
 	        owner.onCopyListener = owner.onCopy.bind(owner);
 
+	        owner.initSwapHiddenInput();
+
 	        owner.element.addEventListener('input', owner.onChangeListener);
 	        owner.element.addEventListener('keydown', owner.onKeyDownListener);
 	        owner.element.addEventListener('focus', owner.onFocusListener);
@@ -139,6 +141,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	    },
 
+	    initSwapHiddenInput: function () {
+	        var owner = this, pps = owner.properties;
+	        if (!pps.swapHiddenInput) return;
+
+	        var inputFormatter = owner.element.cloneNode(true);
+	        owner.element.parentNode.insertBefore(inputFormatter, owner.element);
+
+	        owner.elementSwapHidden = owner.element;
+	        owner.elementSwapHidden.type = 'hidden';
+
+	        owner.element = inputFormatter;
+	        owner.element.id = '';
+	    },
+
 	    initNumeralFormatter: function () {
 	        var owner = this, pps = owner.properties;
 
@@ -430,6 +446,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        owner.element.value = newValue;
+	        if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue();
+
 	        Util.setSelection(owner.element, endPos, pps.document, false);
 	        owner.callOnValueChanged();
 	    },
@@ -1592,6 +1610,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.tailPrefix = !!opts.tailPrefix;
 
 	        // others
+	        target.swapHiddenInput = !!opts.swapHiddenInput;
+
 	        target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
 	        target.uppercase = !!opts.uppercase;

diff --git a/dist/cleave.min.js b/dist/cleave.min.js
diff --git a/doc/options.md b/doc/options.md
@@ -38,6 +38,7 @@
     - [numericOnly](#numericonly)
     - [uppercase](#uppercase)
     - [lowercase](#lowercase)
+    - [swapHiddenInput](#swaphiddeninput)
     - [onValueChanged](#onvaluechanged)
 
 ## Credit card numbers
@@ -569,6 +570,14 @@ A `Boolean` value indicates if it converts value to lowercase letters.
 
 **Default value**: `false`
 
+### `swaphiddeninput`
+
+A `Boolean` value indicates if it swaps the input field to a hidden field.
+
+This way, formatting only happens on the cloned (visible) UI input, the value of hidden field will be updated as raw value without formatting.
+
+**Default value**: `false`
+
 ### `onValueChanged`
 
 A callback `Function`. Triggered after value changes.