離子框架iOS輸入焦點問題

我目前在專注於iOS輸入方面遇到問題。它在Android上完美運行，但由於某些原因，iOS有些情況下有時需要多次點擊才能實際註冊輸入上的點擊事件，並在輸入時打開鍵盤焦點，其他時間焦點放在一些隨機元素上在可見區域後面，鍵盤打開，但輸入區域沒有焦點。我們有多個輸入被隱藏在可見的輸入之後，但我認爲這不重要。離子框架iOS輸入焦點問題

離子信息：
系統信息：
科爾多瓦CLI：6.2.0
離子Framework版本：1.3.1
離子CLI版本：2.1.1
離子應用程序庫版本：2.1.1
IOS部署版本：1.8.6
IOS-SIM版本：5.0.8
操作系統：Mac OS X塞拉利昂
節點版本：v6.3.0
的Xcode版本：8.0的Xcode構建versio ñ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>

有誰知道如何解決這個問題？

來源

2016-10-19 Aleksandr Movsesyan

我已經找到了解決方案，並使其更好地工作。而不是在頁腳內輸入所有內容，我每次都添加和刪除它們。這樣，在頁腳內只有一個輸入。這似乎工作得很好。我做的第二件事是通過將下面的代碼添加到控制器來處理幻像鍵盤外殼。

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

來源

2016-10-20 17:58:28

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>

來源

2016-10-19 08:31:26

這將工作，但我需要用戶啓動焦點，而不是js。所以它會在tap/clcik上。 –

離子框架iOS輸入焦點問題

回答

相關問題