Something in the cordova / angular / ionic stack steals my focus
I used following directive for Cordova-Ionic:
app.directive('focusableInput', function($timeout,$log) { return { restrict: 'A', require: 'ngModel', scope: { focusState: "=", onGo: "&" }, link: function(scope, element, attr, ngModel) { var moveCursorToEnd = function(el) { if (typeof el.selectionStart == "number") { el.selectionStart = el.selectionEnd = el.value.length; } else if (typeof el.createTextRange != "undefined") { el.focus();// var range = el.createTextRange();// range.collapse(false);// range.select(); } } scope.$watch("focusState", function(state) { $log.debug("focusableInput - focus state change: " + state,element); if (state) { //cordova.plugins.Keyboard.show(); $log.debug("focusableInput - do focus!!!",element); $timeout(function() { element[0].focus(); moveCursorToEnd(element[0]); }, 300); //element[0].focus(); } else { element[0].blur(); } }); element.on("keydown", function(event) { console.log("pressed: " + event.which, event); //$log.debug(attr); if (event.which == 13) { $timeout(function() { scope.onGo(); }); } }); scope.$watch( function() { return ngModel.$modelValue; }, function(newValue) { $log.debug("focus input model changed: ", newValue); if (newValue) { var endChar = newValue[newValue.length - 1]; $log.debug("endChar",endChar); if (endChar == " " || endChar == ",") { $timeout(function() { scope.addItem(); }); } } } ); } };});
And usage:
<input type="email" placeholder="Email" class="login-custom-input" focusable-input focus-state="textAreaFocusState" ng-model="meeterAccount.email" ng-focus="onSignUpLoginEmailFocus()" ng-blur="onSignUpLoginEmailFocusLost()" >
focusable-input
directive uses focus-state
attribute
Hope it will help you.