how to move to next input field on ionic

Question

I would like to move focus when I click next button on keyboard on ionic.

But it's not working. There is no action.

How can I move focus to next textbox.

  <script id="page_menuList.html" type="text/ng-template">
    <ion-header-bar style = "height:10%; background: none; border-bottom: none">
      <a id = "button_backToDish" href="#/page_dish"></a>
    </ion-header-bar>
    <ion-view class = "page_menuList">
      <ion-content id = "filter2" class = "no-header">
          <button class="button button-full button-positive" ui-sref="page_profile" style = "margin-top:15%; background-color:transparent; color:#ffffff; font-size:18px; border: none; text-align:left; vertical-align:middle;">
            <img src = "img/Menu/icon_profile.png" style = "width:6.5%; margin-left:3%; margin-top:3%;"> &nbsp; 내 정보
          </button>
          <button class="button button-full button-positive" ui-sref="page_basket" style = "margin-top:1.5%; background-color:transparent; color:#ffffff; font-size:18px; border: none; text-align:left; vertical-align:middle;">
            <img src = "img/Menu/icon_basket.png" style = "width:6.5%; margin-left:3%; margin-top:2%;"> &nbsp; 주문 현황
          </button>
          <button class="button button-full button-positive" ui-sref="page_notice" style = "margin-top:1.5%; background-color:transparent; color:#ffffff; font-size:18px; border: none; text-align:left; vertical-align:middle;">
            <img src = "img/Menu/icon_notification.png" style = "width:6.5%; margin-left:3%; margin-top:2%;"> &nbsp; 공지알림
          </button>
          <button class="button button-full button-positive" ui-sref="page_about" style = "margin-top:1.5%; background-color:transparent; color:#ffffff; font-size:18px; border: none; text-align:left; vertical-align:middle;">
            <img src = "img/Menu/icon_about.png" style = "width:6.5%; margin-left:3%; margin-top:2%;"> &nbsp; About Us
          </button>
          <button class="button button-full button-positive" ui-sref="page_support" style = "margin-top:1.5%; background-color:transparent; color:#ffffff; font-size:18px; border: none; text-align:left; vertical-align:middle;">
            <img src = "img/Menu/icon_support.png" style = "width:6.5%; margin-left:3%; margin-top:2%;"> &nbsp; Support
          </button>
      </ion-content>
    </ion-view>
  </script>

Answer 1

Hi all you need to do is identify the all inputs, textareas and selectors and on keydown. Move to next field.

app.directive('focusNext', 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(); This can be used if don't have  input fields nested inside other container elements
                    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;
                        }
                    }
              }
            });
        }
    } })

Hope this helps..