I have a weird problem on my web app(AngularJS HTML5). Upon upgrading my iPad to iOS8, the onscreen keyboard is behaving weirdly. Upon tapping a text field once, the keyboard (very) briefly flashes and goes away. It is almost impossible to see - there's only a dark flash at the bottom of the screen. Upon tapping again, the keyboard comes up fine. has anybody else faced this issue? It is driving me crazy!
This is the input field:
HTML:
<input valid-number ng-disabled="planBody.isSubmitted==='Y'" type="tel" maxlength="13" ng-model="planBody.campaign.campaignparams.budget" ng-required="true" currency-input=""/>
JS:
.directive('validNumber', function() {
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
if(!ngModelCtrl) {
return;
}
ngModelCtrl.$parsers.push(function(val) {
if(angular.isUndefinedOrNull(val))
{
val = "";
}
var clean = val.replace( /[^0-9]+/g, '');
if (val !== clean) {
ngModelCtrl.$setViewValue(clean);
ngModelCtrl.$render();
}
return clean;
});
element.bind('keypress', function(event) {
if(event.keyCode === 32) {
event.preventDefault();
}
});
}
};
})
.directive('currencyInput', function($filter, $browser) {
return {
require: 'ngModel',
link: function($scope, $element, $attrs, ngModelCtrl) {
var listener = function() {
var value = $element.val().replace(/,/g, '');
if(value !== ""){
$element.val($filter('number')(value, false));
}
$scope.markForSaveAlert();
};
// This runs when we update the text field
ngModelCtrl.$parsers.push(function(viewValue) {
return viewValue.replace(/,/g, '');
});
// This runs when the model gets updated on the scope directly and keeps our view in sync
ngModelCtrl.$render = function() {
if(ngModelCtrl.$viewValue!==''){
$element.val($filter('number')(ngModelCtrl.$viewValue, false));
}
};
$element.bind('change', listener);
$element.bind('keydown', function(event) {
var key = event.keyCode;
// If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
// This lets us support copy and paste too
if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
return;
}
$browser.defer(listener); // Have to do this or changes don't get picked up properly
});
$element.bind('paste cut', function() {
$browser.defer(listener);
});
}
};
})
Update: THis seems to happen only on full screen mode, not in regular mobile Safari
