On keyboard next button move to next input field

ionic-v1
1

I am not able to move to next field in a form through keyboard next button. Please help on this.

5 Likes
2

Same here!
Is there any way to accomplish this?

tkx

3

Yes, I’ve ran into some issues about this “next button”.
Sometimes the user was unable to enter information. We had to hide the keyboard and then click on the input again to edit.

4

All you need to do is identify the input, selector and textarea elements. Use following directive it’ll solve your probkem, I know it’s late but it’s for the other who may run into same issue.

app.directive(‘focus’, function () {
return {
restrict: ‘A’,
link: function ($scope, element, attrs) {

        element.bind('keydown', function(e) {
          var code = e.keyCode || e.which;
          if (code === 13) {
            e.preventDefault();
            //element.next()[0].focus();
                var pageElements = document.querySelectorAll('input, select, textarea'),
                    element = e.srcElement
                    focusNext = false,
                    len = pageElements.length;
                for (var i = 0; i < len; i++) {
                    var elem = pageElements[i];
                    if (focusNext) {
                        if (elem.style.display !== 'none') {
                            elem.focus();
                            break;
                        }
                    } else if (elem === e.srcElement) {
                        focusNext = true;
                    }
                }
          }
        });
    }
}

})

I’ve updated existing Fiddle is here… FocusNext element on enter/next keyboard key - JSFiddle - Code Playground

2 Likes
5
  1. Use ‘#’ all the elements in the html
    like this
    <ion-input #Field1 (keyup.enter)="gotoNextField(Field2)" ></ion-input>
    <ion-input #Field2 (keyup.enter)="gotoNextField(Field3)" ></ion-input>
    <ion-input #Field3 (keyup.enter)="gotoNextField(Field4)" ></ion-input>
    <ion-input #Field4 (keyup.enter)="finishFunction()" ></ion-input>
  2. use this function
    in the .ts
  gotoNextField(nextElement){
        nextElement.setFocus();
    }