When using the keyboard in forms I am experiencing a weird problem on both iOS and Android. Let’s first discuss iOS, since this is normally the one better supported. To reproduce, create an ionic app:
$ ionic start keyboardTest blank
$ cd ./keyboardTest
$ ionic platform add ios
Replace the content of index.html
with
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="CtrlLogin">
<ion-content>
<h1>keyboardTest</h1>
<form name='loginForm' ng-submit="login()">
<ion-list>
<label class="item item-input">
<input type="text" placeholder="Email" ng-model="user.email">
</label>
<label class="item item-input">
<input type="password" placeholder="Passwort" ng-model="user.pw">
</label>
</ion-list>
<button class="button button-positive button-block" on-tap="login()">Login</button>
</form>
</ion-content>
</ion-pane>
</body>
</html>
And of app.js
with
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// if(window.cordova && window.cordova.plugins.Keyboard) {
// cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// }
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('CtrlLogin', function ($scope){
$scope.user = {};
$scope.login = function (){
console.log('logging in');
}
})
Now it’s time to test.
$ ionic emulate ios
Now type anything in the Email field and then press on the >
in the bar:
You will experience that the cursor will not jump to the password field when pressing the >
button only once. This is not intended I think.
This seems to be one incarnation of some keyboard problems I have, that I don’t want to describe all. I think fixing this would also fix the others.
So, what to do against it?