离子框架iOS输入焦点问题

Question

I am currently having trouble with focus on my inputs for iOS.我目前无法专注于 iOS 输入。 It works perfectly on Android, but for some reason something is going with iOS where sometimes it takes multiple clicks before it actually registers a click event on the input and opens the keyboard with focus in the input and other times it gives focus to some random element behind the visible one so the keyboard opens, but the input field doesn't have focus.它在 Android 上运行良好，但出于某种原因，iOS 会出现某些情况，有时它需要多次单击才能在输入上实际注册单击事件并在输入中打开键盘，而其他时候它会将焦点放在一些随机元素上在可见的后面，所以键盘打开，但输入字段没有焦点。 We have multiple inputs that are hidden behind the visible one, but I don't think that should matter.我们有多个输入隐藏在可见输入后面，但我认为这无关紧要。

Ionic info:离子信息：
Your system information:您的系统信息：
Cordova CLI: 6.2.0科尔多瓦 CLI：6.2.0
Ionic Framework Version: 1.3.1离子框架版本：1.3.1
Ionic CLI Version: 2.1.1离子 CLI 版本：2.1.1
Ionic App Lib Version: 2.1.1离子应用程序库版本：2.1.1
ios-deploy version: 1.8.6 ios 部署版本：1.8.6
ios-sim version: 5.0.8 ios-sim 版本：5.0.8
OS: Mac OS X Sierra操作系统：Mac OS X Sierra
Node Version: v6.3.0节点版本：v6.3.0
Xcode version: Xcode 8.0 Build version 8A218a Xcode 版本：Xcode 8.0 构建版本 8A218a

A basic outline of our code can be found here: http://codepen.io/anon/pen/wzYEQk我们的代码的基本轮廓可以在这里找到： 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>

Does anyone know how to solve this?有谁知道如何解决这个问题？

Answer 1

Remember adding this preference tag on my config.xml file before.记得之前在我的config.xml文件中添加了这个首选项标签。

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

This made the autofocus work before.这使自动对焦之前工作。

Answer 2

I have figured out the solution and to make it work better.我已经找到了解决方案并使其更好地工作。 Instead of having all the inputs within the footer, I add and remove them every time.我每次都添加和删除它们，而不是在页脚中包含所有输入。 That way there is only ever one input within the footer.这样一来，页脚中就只有一个输入。 This seems to work fairly well.这似乎工作得很好。 The second thing I did was to handle the phantom keyboard case by add the following code to the controller.我做的第二件事是通过将以下代码添加到控制器来处理幻象键盘案例。

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

<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