[ISSUE-281] Fix prefix focus cursor issue (#308)

nosir · Mar 14, 2018 · 59f125d · 59f125d
1 parent 3c30c0f
commit 59f125d
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "1.1.3",
+  "version": "1.1.4",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

diff --git a/dist/cleave-angular.js b/dist/cleave-angular.js
@@ -100,11 +100,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        owner.onChangeListener = owner.onChange.bind(owner);
 	        owner.onKeyDownListener = owner.onKeyDown.bind(owner);
+	        owner.onFocusListener = owner.onFocus.bind(owner);
 	        owner.onCutListener = owner.onCut.bind(owner);
 	        owner.onCopyListener = owner.onCopy.bind(owner);
 
 	        owner.element.addEventListener('input', owner.onChangeListener);
 	        owner.element.addEventListener('keydown', owner.onKeyDownListener);
+	        owner.element.addEventListener('focus', owner.onFocusListener);
 	        owner.element.addEventListener('cut', owner.onCutListener);
 	        owner.element.addEventListener('copy', owner.onCopyListener);
 
@@ -196,6 +198,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.onInput(this.element.value);
 	    },
 
+	    onFocus: function () {
+	        var owner = this,
+	            pps = owner.properties;
+
+	        Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
+	    },
+
 	    onCut: function (e) {
 	        this.copyClipboardData(e);
 	        this.onInput('');
@@ -441,6 +450,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        owner.element.removeEventListener('input', owner.onChangeListener);
 	        owner.element.removeEventListener('keydown', owner.onKeyDownListener);
+	        owner.element.removeEventListener('focus', owner.onFocusListener);
 	        owner.element.removeEventListener('cut', owner.onCutListener);
 	        owner.element.removeEventListener('copy', owner.onCopyListener);
 	    },
@@ -1031,6 +1041,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return result;
 	    },
 
+	    // move cursor to the end
+	    // the first time user focuses on an input with prefix
+	    fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
+	        var val = el.value,
+	            appendix = delimiter || (delimiters[0] || ' ');
+
+	        if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) < val.length) {
+	            return;
+	        }
+
+	        var len = val.length * 2;
+
+	        // set timeout to avoid blink
+	        setTimeout(function () {
+	            el.setSelectionRange(len, len);
+	        }, 1);
+	    },
+
 	    isAndroid: function () {
 	        return navigator && /android/i.test(navigator.userAgent);
 	    },

diff --git a/dist/cleave-angular.min.js b/dist/cleave-angular.min.js
diff --git a/dist/cleave-react-node.js b/dist/cleave-react-node.js
@@ -286,6 +286,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        event.target.value = pps.result;
 
 	        owner.registeredEvents.onFocus(event);
+
+	        Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
 	    },
 
 	    onBlur: function onBlur(event) {
@@ -2284,6 +2286,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return result;
 	    },
 
+	    // move cursor to the end
+	    // the first time user focuses on an input with prefix
+	    fixPrefixCursor: function fixPrefixCursor(el, prefix, delimiter, delimiters) {
+	        var val = el.value,
+	            appendix = delimiter || delimiters[0] || ' ';
+
+	        if (!el.setSelectionRange || !prefix || prefix.length + appendix.length < val.length) {
+	            return;
+	        }
+
+	        var len = val.length * 2;
+
+	        // set timeout to avoid blink
+	        setTimeout(function () {
+	            el.setSelectionRange(len, len);
+	        }, 1);
+	    },
+
 	    isAndroid: function isAndroid() {
 	        return navigator && /android/i.test(navigator.userAgent);
 	    },

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
@@ -286,6 +286,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        event.target.value = pps.result;
 
 	        owner.registeredEvents.onFocus(event);
+
+	        Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
 	    },
 
 	    onBlur: function onBlur(event) {
@@ -2478,6 +2480,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return result;
 	    },
 
+	    // move cursor to the end
+	    // the first time user focuses on an input with prefix
+	    fixPrefixCursor: function fixPrefixCursor(el, prefix, delimiter, delimiters) {
+	        var val = el.value,
+	            appendix = delimiter || delimiters[0] || ' ';
+
+	        if (!el.setSelectionRange || !prefix || prefix.length + appendix.length < val.length) {
+	            return;
+	        }
+
+	        var len = val.length * 2;
+
+	        // set timeout to avoid blink
+	        setTimeout(function () {
+	            el.setSelectionRange(len, len);
+	        }, 1);
+	    },
+
 	    isAndroid: function isAndroid() {
 	        return navigator && /android/i.test(navigator.userAgent);
 	    },

diff --git a/dist/cleave-react.min.js b/dist/cleave-react.min.js
diff --git a/dist/cleave.js b/dist/cleave.js
@@ -100,11 +100,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        owner.onChangeListener = owner.onChange.bind(owner);
 	        owner.onKeyDownListener = owner.onKeyDown.bind(owner);
+	        owner.onFocusListener = owner.onFocus.bind(owner);
 	        owner.onCutListener = owner.onCut.bind(owner);
 	        owner.onCopyListener = owner.onCopy.bind(owner);
 
 	        owner.element.addEventListener('input', owner.onChangeListener);
 	        owner.element.addEventListener('keydown', owner.onKeyDownListener);
+	        owner.element.addEventListener('focus', owner.onFocusListener);
 	        owner.element.addEventListener('cut', owner.onCutListener);
 	        owner.element.addEventListener('copy', owner.onCopyListener);
 
@@ -196,6 +198,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.onInput(this.element.value);
 	    },
 
+	    onFocus: function () {
+	        var owner = this,
+	            pps = owner.properties;
+
+	        Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
+	    },
+
 	    onCut: function (e) {
 	        this.copyClipboardData(e);
 	        this.onInput('');
@@ -441,6 +450,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        owner.element.removeEventListener('input', owner.onChangeListener);
 	        owner.element.removeEventListener('keydown', owner.onKeyDownListener);
+	        owner.element.removeEventListener('focus', owner.onFocusListener);
 	        owner.element.removeEventListener('cut', owner.onCutListener);
 	        owner.element.removeEventListener('copy', owner.onCopyListener);
 	    },
@@ -1031,6 +1041,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return result;
 	    },
 
+	    // move cursor to the end
+	    // the first time user focuses on an input with prefix
+	    fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
+	        var val = el.value,
+	            appendix = delimiter || (delimiters[0] || ' ');
+
+	        if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) < val.length) {
+	            return;
+	        }
+
+	        var len = val.length * 2;
+
+	        // set timeout to avoid blink
+	        setTimeout(function () {
+	            el.setSelectionRange(len, len);
+	        }, 1);
+	    },
+
 	    isAndroid: function () {
 	        return navigator && /android/i.test(navigator.userAgent);
 	    },