tabIndex with Ionic?

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

This is my form:

image

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:
image
image

“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?

1 Like

Could you find any solution for this issue?

Please contact me if you have a fix.

Thanks,
Adrian

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

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.