Question

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

但它没有用。没有行动。

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

＆＃13;

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

＆＃13;

Answer 1

您需要做的就是识别所有输入，textareas和选择器以及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;
                        }
                    }
              }
            });
        }
    } })

希望这会有所帮助..

Answer 2

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

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

Answer 3

在iOS上，您需要在config.xml中添加它

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

iOS Configuration

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

Answer 5

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

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

就这么简单！

如何移动到离子

5 个答案: