离子框架iOS输入焦点问题

Question

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

离子信息：
您的系统信息：
科尔多瓦 CLI：6.2.0
离子框架版本：1.3.1
离子 CLI 版本：2.1.1
离子应用程序库版本：2.1.1
ios 部署版本：1.8.6
ios-sim 版本：5.0.8
操作系统：Mac OS X Sierra
节点版本：v6.3.0
Xcode 版本：Xcode 8.0 构建版本 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

记得之前在我的config.xml文件中添加了这个首选项标签。

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

这使自动对焦之前工作。

Answer 2

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

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 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 个解决方案

解决方案1
2 2018-09-25 08:06:24

解决方案2
1 已采纳 2016-10-20 17:58:28

解决方案3
0 2016-10-19 08:31:26

离子框架iOS输入焦点问题

问题描述

3 个解决方案

解决方案1 2 2018-09-25 08:06:24

解决方案2 1 已采纳 2016-10-20 17:58:28

解决方案3 0 2016-10-19 08:31:26

解决方案1
2 2018-09-25 08:06:24

解决方案2
1 已采纳 2016-10-20 17:58:28

解决方案3
0 2016-10-19 08:31:26