In the process of developing my Ionic/Cordova app, I encountered a challenge with number input on Samsung devices. It seems that they do not display the decimal separator when the input type is set to number. If this were a native app, I could easily use the numberDecimal type, but unfortunately, there isn't a similar input type in HTML. To address this issue, I made the decision to create a simple directive using AngularJS, which would automatically insert the decimal separator:
angular.module('number.mask', [])
.directive('numberMask', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
element.on('focus',function(){
this.value = this.value;
});
element.on('keyup',function(event){
if (ctrl.$isEmpty(ctrl.$viewValue)) {
return ctrl.$viewValue;
}
var newValue=ctrl.$viewValue;
if(event.keyCode=== 8)
newValue/=10;
else if(newValue.toString().indexOf('.')===-1 && newValue.toString().indexOf(',')===-1)
newValue/=100;
else
newValue*=10;
newValue=parseFloat(Math.round(newValue * 100) / 100).toFixed(2);
ctrl.$setViewValue(newValue);
ctrl.$render();
});
}
};
});
I've made good progress with this solution, but now I'm facing an issue where pressing the backspace button doesn't trigger any events. While other buttons like paste fire keydown and keyup events, the backspace button remains unresponsive. This leads to my question: How can I detect events when the backspace button is pressed on the Android virtual keyboard?