jquery-maskmoney
jquery-maskmoney copied to clipboard
plentz
Mask not respected on Android
Hi, I've been using this lib for quite a while now, it's pretty good, thank you for sharing it!
Recently I've noticed an odd behavior. On Android (that I know, 5.1 and lower ones), using Chrome (51.0.2704.81 and possibly other ones too), when I start typing numbers, say 1234 for example, in the field, I always get something like this $ 0.001234. Then, when I leave the field (blur), into another field it keeps the same $ 0.001234, but when I go back to it (focus), all of the sudden the mask is correctly applied $ 12.34.
Do you happen to have any Android device in order to simulate this situation? You can do so trying out the lib example page itself
Any help is appreciated!
Best wishes,
Guilherme Vaz
I'm having a similar issue.
When I type anything in an input using Android, nothing happens (it behaves like an ordinary input). When I blur it and then focus it again, the mask is suddenly applied to the current input (but won't be applied as I continue typing).
Model: Samsung Galaxy S4 OS: Android 4.4 Browser: Google Chrome 51.0.2704.81 Keyboard: SwiftKey 6.3.8.73
@amylashley @GutoMotta since we got no solution for this, I've switched to this lib https://github.com/igorescobar/jQuery-Mask-Plugin it has a very similar syntax and it works great both on desktop/notebooks and mobile devices. Hope it helps!
Try to replace keydownevent function with this one, sometimes keypress is not fired in the devices.
function keydownEvent(e) {
e = e || window.event;
var key = e.which || e.charCode || e.keyCode,
keyPressedChar,
selection,
startPos,
endPos,
value,
lastNumber;
//needed to handle an IE "special" event
if (key === undefined) {
return false;
}
selection = getInputSelection();
startPos = selection.start;
endPos = selection.end;
if (key !== 8 && key !== 46 && key !== 63272) {
// any key except the numbers 0-9
if (key < 48 || (key > 57 && key < 96) || key > 105) {
// -(minus) key
if (key === 45) {
$input.val(changeSign());
return false;
// +(plus) key
} else if (key === 43) {
$input.val($input.val().replace("-", ""));
return false;
// enter key or tab key
} else if (key === 13 || key === 9) {
return true;
} else if ($.browser.mozilla && (key === 37 || key === 39) && e.charCode === 0) {
// needed for left arrow key or right arrow key with firefox
// the charCode part is to avoid allowing "%"(e.charCode 0, e.keyCode 37)
return true;
} else { // any other key with keycode less than 48 and greater than 57
preventDefault(e);
return -true;
}
} else if (!canInputMoreNumbers()) {
return false;
} else {
preventDefault(e);
if (key >= 96 && key <= 105) {
keyPressedChar = String.fromCharCode(key - 48);
}
else {
keyPressedChar = String.fromCharCode(key);
}
selection = getInputSelection();
startPos = selection.start;
endPos = selection.end;
value = $input.val();
$input.val(value.substring(0, startPos) + keyPressedChar + value.substring(endPos, value.length));
maskAndPosition(startPos + 1);
return false;
}
}
if (key === 8 || key === 46 || key === 63272) { // backspace or delete key (with special case for safari)
preventDefault(e);
value = $input.val();
// not a selection
if (startPos === endPos) {
// backspace
if (key === 8) {
if (settings.suffix === "") {
startPos -= 1;
} else {
// needed to find the position of the last number to be erased
lastNumber = value.split("").reverse().join("").search(/\d/);
startPos = value.length - lastNumber - 1;
endPos = startPos + 1;
}
//delete
} else {
endPos += 1;
}
}
$input.val(value.substring(0, startPos) + value.substring(endPos, value.length));
maskAndPosition(startPos);
return false;
} else if (key === 9) { // tab key
return true;
} else { // any other key
return true;
}
}
I tried to overwrite the keydownEvent() but it's not working yet (it behaves quite fuzzy, indeed). I am using Android 4.4 on a Samsung Tab3 8" tablet.
Hi,
Also have same problem with...
Chrome 53.0.2785.124 or Internet 4.0.20-20 Android 6.0.1;SM-G903M Build/MMB29K
The https://github.com/BankFacil/vanilla-masker run correct, but don't have support to negative numbers and HTML5 data attributes.
Thanks
I was able to solve it with this. It mimics the keypress function and I placed it right before the keydown function.
$input.on('keyup', function (e) {
e = e || window.event;
var key = e.which || e.charCode || e.keyCode,
keyPressedChar,
selection,
startPos,
endPos,
value;
selection = getInputSelection();
startPos = selection.start;
maskAndPosition(startPos + 1);
});
Other very simple workaround on this is just to set your input type as tel instead of text
Eg:
<input type="tel" inputmode="numeric">
😉
FYI @abdulmhamid's solution requires you to update the source file. You can add the snippet on line 489: https://github.com/plentz/jquery-maskmoney/blob/master/src/jquery.maskMoney.js#L489
I had issues with @abdulmhamid's code on browsers that weren't Chrome on Android.
A solution is to make the code only run on Chrome browsers for Android devices:
var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);
// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
$input.on('keyup', function(e) {
e = e || window.event;
var key = e.which || e.charCode || e.keyCode,
keyPressedChar,
selection,
startPos,
endPos,
value;
selection = getInputSelection();
startPos = selection.start;
maskAndPosition(startPos + 1);
});
}
I had too many HTML forms, so appyling @evsar3 solution via JQuery worked for me.
var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);
// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
$('.work_price').attr('type','tel');
}
Outra solução muito simples para isso é apenas definir seu tipo de entrada como, em
telvez detextEx:<input type="tel" inputmode="numeric">piscadela
Working here! Thanks
