tabIndex with Ionic?


#1

Hello. Im new in Ionic and Im having a little problem with a form.

This is my form:

And this is the code of that form:

<div class="row">
                <div class="col">
                    <label class="item item-input item-floating-label">
                        <span class="input-label">Nombre</span>
                        <input ng-required="true" ng-model="reservation.name" ng-model-options="{ debounce: 500 }" type="text" placeholder="Nombre" tabindex="1">
                    </label>
                </div>
                <div class="col">
                    <label class="item item-input item-floating-label">
                        <span class="input-label">Apellido</span>
                        <input ng-required="true" ng-model="reservation.last" ng-model-options="{ debounce: 500 }" type="text" placeholder="Apellido" tabindex="2">
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <label class="item item-input item-floating-label">
                        <span class="input-label">Teléfono movil</span>
                        <input ng-required="true" ng-model="reservation.phone" ng-model-options="{ debounce: 500 }" type="tel" placeholder="Teléfono movil" tabindex="3">
                    </label>
                </div>
                <div class="col">
                    <label class="item item-input item-floating-label">
                        <span class="input-label">Email</span>
                        <input ng-required="true" ng-model="reservation.email" ng-model-options="{ debounce: 500 }" type="email" placeholder="Email" tabindex="4">
                    </label>
                </div>
            </div>

The tabindex works fine in the browser obviously. Buy in my phone this doesnt work fine. Just the phone input field shows the NEXT button. The others fields shows the GO button.

Here are the screenshots:

“Sig.” = NEXT button in spanish
"Ir" = Go button in spanish

I’d like that the first three inputs have a NEXT button and the last one a GO button. Is that possible?


#2

Could you find any solution for this issue?

Please contact me if you have a fix.

Thanks,
Adrian


#3

Hi, I’m having the same issue.

Tabindex works fine on browser but instead of seeing the “Next” button to go to the next input when running on Android, I see the “Go” button that takes me to submit.

Also added (without any change)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

on $ionicPlatform.ready

Any insight?

EDIT. Got answer for my question here: http://stackoverflow.com/questions/6545086/html-why-does-android-browser-show-go-instead-of-next-in-keyboard


#4

Try the below code,

app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.Keyboard.disableScroll(false);
}
});
})

Make sure you have the plugins installed for this.