Question

我目前无法专注于iOS的输入。它在Android上运行得很好，但出于某种原因，iOS会出现一些问题，有时需要多次点击才能在输入上实际注册点击事件，并在输入中打开焦点并将焦点放在一些随机元素上在可见的后面，键盘打开，但输入字段没有焦点。我们有多个输入隐藏在可见的输入后面，但我认为这不重要。

离子信息：
您的系统信息：
Cordova CLI：6.2.0
离子框架版本：1.3.1
离子CLI版本：2.1.1
Ionic App Lib版本：2.1.1
ios-deploy版本：1.8.6
ios-sim版本：5.0.8
操作系统：Mac OS X Sierra
节点版本：v6.3.0
Xcode版本：Xcode 8.0 Build版本8A218a

我们的代码的基本概要可以在这里找到：http://codepen.io/anon/pen/wzYEQk

<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
  <ion-content class="background-cntr" delegate-handle="mainScroll">
    SOME HTML CONTENT
  </ion-content>
  <ion-footer-bar>
    <div class="list">
          <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text"/>
                    <input type="text" style="display:none;"/>
        </label>
        <button>Test</button>
      </div>
    </div>
  </ion-footer-bar>
</ion-view>

有谁知道如何解决这个问题？

Answer 1

我已经找到了解决方案，并使其更好地运作。我没有在页脚中输入所有输入，而是每次添加和删除它们。这样，页脚中只有一个输入。这似乎运作得相当好。我做的第二件事是通过将以下代码添加到控制器来处理幻像键盘盒。

window.addEventListener('native.keyboardshow', function(){
  if (document.activeElement.nodeName !== "INPUT") {
    var activeElement = document.querySelector("#chat_footer_inputs input");
    if (activeElement) {
      activeElement.focus();
      $ionicScrollDelegate.scrollBottom(true);
    }
  }
});

Answer 2

请记住，以前在我的config.xml文件中添加了此首选项标签。

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

这使自动对焦工作之前。

Answer 3

<强> JS

angular.module('ionicApp', ['ionic'])
.factory('focus', function($timeout, $window) {
        return function(id) {
            $timeout(function() {
                var element =     $window.document.getElementById(id);
                if(element)
                    element.focus();
            });
        };
    })
.controller('MyCtrl', function($scope, focus) {
 focus("myInput")

});

<强> HTML

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Input trouble on iOS</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-controller="MyCtrl">
    <ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
      <ion-content class="background-cntr" delegate-handle="mainScroll">
        SOME HTML CONTENT
      </ion-content>
      <ion-footer-bar>
        <div class="list">
              <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <input type="text"/>
                        <input type="text" style="display:none;"/>
            </label>
            <button>Test</button>
          </div>
        </div>
      </ion-footer-bar>
    </ion-view>

  </body>
</html>

离子框架iOS输入焦点问题

3 个答案: