首页 文章

离子框架iOS输入焦点问题

提问于
浏览 次
2

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

离子信息：
您的系统信息：
Cordova CLI：6.2.0
离子框架版本：1.3.1
Ionic 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>

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

ios cordova ionic-framework

3 回答

  • 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);
    }
  }
});
    回复于
  • 1

    请记住之前在我的 config.xml 文件中添加此首选项标记 .

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

    这使得自动对焦工作之前 .

    回复于
  • 0

    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>
    回复于

相关问题