如何移动到离子上的下一个输入字段答案

【问题标题】：how to move to next input field on ionic如何移动到离子上的下一个输入字段
【发布时间】：2015-12-06 13:04:12
【问题描述】：

当我点击离子键盘上的下一步按钮时，我想移动焦点。

但它不起作用。没有任何动作。

如何将焦点移到下一个文本框。

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

【问题讨论】：

标签： textbox keyboard focus ionic

【解决方案1】：

您好，您需要做的就是识别所有输入、文本区域和选择器以及在 keydown 上。移至下一个字段。

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;
                        }
                    }
              }
            });
        }
    } })

希望这有帮助..

【讨论】：

只有在我使用 e.currentTarget 而不是 e.srcElement 时才有效

【解决方案2】：

您可以直接编写一个处理 NEXT 按钮并使用下面的代码跳转到下一个输入：

var nextinput = element.next('input');
if (nextinput.length === 1)
{
    nextinput[0].focus();
}

【讨论】：

谢谢。但我没有为 NEXT BUTTON 制作句柄。我只想点击设备。

【解决方案3】：

在 iOS 上，你需要在 config.xml 中添加这个

<platform name="ios">
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
</platform>

iOS Configuration

【讨论】：

感谢您的帮助。我在 config.xml 中添加了你给我的代码。但它并没有改变任何东西...... android 呢？
你可以使用离子方法来集中你的输入ionic.trigger('tap', { target: document.querySelector('#your-input') });

【解决方案4】：

首先：

在 html 中的所有元素都使用‘#’ 像这样

<ion-input #Field1 (keyup)="gotoNextField(Field2)" </ion-input>
<ion-input #Field2 (keyup)="gotoNextField(Field3)" </ion-input>
<ion-input #Field3 (keyup)="gotoNextField(Field4)" </ion-input>
<ion-input #Field4 (keyup)="finishFunction()" </ion-input>

使用这个功能在.ts

 gotoNextField(nextElement)
        nextElement.setFocus();
    }

【讨论】：

【解决方案5】：

在 ionic 3 中，在 (keyup.enter) 事件上使用以下代码

<ion-input #myInput1 (keyup.enter)="myInput1.focusNext()"></ion-input>
<ion-input #myInput2 (keyup.enter)="myInput2.focusNext()"></ion-input>

就这么简单！

【讨论】：