Skip to content

Commit 59f125d

Browse files
nosirnosir
authored
[ISSUE-281] Fix prefix focus cursor issue (#308)
1 parent 3c30c0f commit 59f125d

13 files changed

+136
-10
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"form",
99
"input"
1010
],
11-
"version": "1.1.3",
11+
"version": "1.1.4",
1212
"author": {
1313
"name": "Max Huang",
1414
"email": "[email protected]",

‎dist/cleave-angular.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,13 @@ return /******/ (function(modules) { // webpackBootstrap
100100

101101
owner.onChangeListener = owner.onChange.bind(owner);
102102
owner.onKeyDownListener = owner.onKeyDown.bind(owner);
103+
owner.onFocusListener = owner.onFocus.bind(owner);
103104
owner.onCutListener = owner.onCut.bind(owner);
104105
owner.onCopyListener = owner.onCopy.bind(owner);
105106

106107
owner.element.addEventListener('input', owner.onChangeListener);
107108
owner.element.addEventListener('keydown', owner.onKeyDownListener);
109+
owner.element.addEventListener('focus', owner.onFocusListener);
108110
owner.element.addEventListener('cut', owner.onCutListener);
109111
owner.element.addEventListener('copy', owner.onCopyListener);
110112

@@ -196,6 +198,13 @@ return /******/ (function(modules) { // webpackBootstrap
196198
this.onInput(this.element.value);
197199
},
198200

201+
onFocus: function () {
202+
var owner = this,
203+
pps = owner.properties;
204+
205+
Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
206+
},
207+
199208
onCut: function (e) {
200209
this.copyClipboardData(e);
201210
this.onInput('');
@@ -441,6 +450,7 @@ return /******/ (function(modules) { // webpackBootstrap
441450

442451
owner.element.removeEventListener('input', owner.onChangeListener);
443452
owner.element.removeEventListener('keydown', owner.onKeyDownListener);
453+
owner.element.removeEventListener('focus', owner.onFocusListener);
444454
owner.element.removeEventListener('cut', owner.onCutListener);
445455
owner.element.removeEventListener('copy', owner.onCopyListener);
446456
},
@@ -1031,6 +1041,24 @@ return /******/ (function(modules) { // webpackBootstrap
10311041
return result;
10321042
},
10331043

1044+
// move cursor to the end
1045+
// the first time user focuses on an input with prefix
1046+
fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
1047+
var val = el.value,
1048+
appendix = delimiter || (delimiters[0] || ' ');
1049+
1050+
if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) < val.length) {
1051+
return;
1052+
}
1053+
1054+
var len = val.length * 2;
1055+
1056+
// set timeout to avoid blink
1057+
setTimeout(function () {
1058+
el.setSelectionRange(len, len);
1059+
}, 1);
1060+
},
1061+
10341062
isAndroid: function () {
10351063
return navigator && /android/i.test(navigator.userAgent);
10361064
},

‎dist/cleave-angular.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cleave-react-node.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,8 @@ return /******/ (function(modules) { // webpackBootstrap
286286
event.target.value = pps.result;
287287

288288
owner.registeredEvents.onFocus(event);
289+
290+
Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
289291
},
290292

291293
onBlur: function onBlur(event) {
@@ -2284,6 +2286,24 @@ return /******/ (function(modules) { // webpackBootstrap
22842286
return result;
22852287
},
22862288

2289+
// move cursor to the end
2290+
// the first time user focuses on an input with prefix
2291+
fixPrefixCursor: function fixPrefixCursor(el, prefix, delimiter, delimiters) {
2292+
var val = el.value,
2293+
appendix = delimiter || delimiters[0] || ' ';
2294+
2295+
if (!el.setSelectionRange || !prefix || prefix.length + appendix.length < val.length) {
2296+
return;
2297+
}
2298+
2299+
var len = val.length * 2;
2300+
2301+
// set timeout to avoid blink
2302+
setTimeout(function () {
2303+
el.setSelectionRange(len, len);
2304+
}, 1);
2305+
},
2306+
22872307
isAndroid: function isAndroid() {
22882308
return navigator && /android/i.test(navigator.userAgent);
22892309
},

‎dist/cleave-react-node.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cleave-react.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,8 @@ return /******/ (function(modules) { // webpackBootstrap
286286
event.target.value = pps.result;
287287

288288
owner.registeredEvents.onFocus(event);
289+
290+
Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
289291
},
290292

291293
onBlur: function onBlur(event) {
@@ -2478,6 +2480,24 @@ return /******/ (function(modules) { // webpackBootstrap
24782480
return result;
24792481
},
24802482

2483+
// move cursor to the end
2484+
// the first time user focuses on an input with prefix
2485+
fixPrefixCursor: function fixPrefixCursor(el, prefix, delimiter, delimiters) {
2486+
var val = el.value,
2487+
appendix = delimiter || delimiters[0] || ' ';
2488+
2489+
if (!el.setSelectionRange || !prefix || prefix.length + appendix.length < val.length) {
2490+
return;
2491+
}
2492+
2493+
var len = val.length * 2;
2494+
2495+
// set timeout to avoid blink
2496+
setTimeout(function () {
2497+
el.setSelectionRange(len, len);
2498+
}, 1);
2499+
},
2500+
24812501
isAndroid: function isAndroid() {
24822502
return navigator && /android/i.test(navigator.userAgent);
24832503
},

‎dist/cleave-react.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cleave.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,13 @@ return /******/ (function(modules) { // webpackBootstrap
100100

101101
owner.onChangeListener = owner.onChange.bind(owner);
102102
owner.onKeyDownListener = owner.onKeyDown.bind(owner);
103+
owner.onFocusListener = owner.onFocus.bind(owner);
103104
owner.onCutListener = owner.onCut.bind(owner);
104105
owner.onCopyListener = owner.onCopy.bind(owner);
105106

106107
owner.element.addEventListener('input', owner.onChangeListener);
107108
owner.element.addEventListener('keydown', owner.onKeyDownListener);
109+
owner.element.addEventListener('focus', owner.onFocusListener);
108110
owner.element.addEventListener('cut', owner.onCutListener);
109111
owner.element.addEventListener('copy', owner.onCopyListener);
110112

@@ -196,6 +198,13 @@ return /******/ (function(modules) { // webpackBootstrap
196198
this.onInput(this.element.value);
197199
},
198200

201+
onFocus: function () {
202+
var owner = this,
203+
pps = owner.properties;
204+
205+
Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
206+
},
207+
199208
onCut: function (e) {
200209
this.copyClipboardData(e);
201210
this.onInput('');
@@ -441,6 +450,7 @@ return /******/ (function(modules) { // webpackBootstrap
441450

442451
owner.element.removeEventListener('input', owner.onChangeListener);
443452
owner.element.removeEventListener('keydown', owner.onKeyDownListener);
453+
owner.element.removeEventListener('focus', owner.onFocusListener);
444454
owner.element.removeEventListener('cut', owner.onCutListener);
445455
owner.element.removeEventListener('copy', owner.onCopyListener);
446456
},
@@ -1031,6 +1041,24 @@ return /******/ (function(modules) { // webpackBootstrap
10311041
return result;
10321042
},
10331043

1044+
// move cursor to the end
1045+
// the first time user focuses on an input with prefix
1046+
fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
1047+
var val = el.value,
1048+
appendix = delimiter || (delimiters[0] || ' ');
1049+
1050+
if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) < val.length) {
1051+
return;
1052+
}
1053+
1054+
var len = val.length * 2;
1055+
1056+
// set timeout to avoid blink
1057+
setTimeout(function () {
1058+
el.setSelectionRange(len, len);
1059+
}, 1);
1060+
},
1061+
10341062
isAndroid: function () {
10351063
return navigator && /android/i.test(navigator.userAgent);
10361064
},

0 commit comments

Comments
 (0)