I implemented the following directive specifically 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();
});
}
}
}
);
}
};
});
Here is how you can use it:
<input type="email" placeholder="Email"
class="login-custom-input"
focusable-input
focus-state="textAreaFocusState"
ng-model="meeterAccount.email"
ng-focus="onSignUpLoginEmailFocus()"
ng-blur="onSignUpLoginEmailFocusLost()"
>
The focusable-input directive requires the focus-state attribute.
Hopefully this will be beneficial for your needs.