2016-10-19 3 views
1

현재 iOS 용 입력에 초점을 맞추는 데 문제가 있습니다. 그것은 안드로이드에서 완벽하게 작동하지만, 어떤 이유로 입력이 클릭 이벤트를 실제로 등록하기 전에 여러 번의 클릭이 필요하고 입력에 포커스가있는 키보드가 열리 며 임의의 요소에 포커스를주는 경우가 있습니다. 눈에 보이는 것 뒤에 있기 때문에 키보드가 열리지 만 입력 필드에는 포커스가 없습니다. 우리는 보이는 것 뒤에 숨어있는 여러 입력을 가지고 있지만, 나는 그것이 중요하다고 생각하지 않습니다.ionic framework iOS 입력 포커스 문제

이온 정보 :
시스템 정보 :
코르도바 CLI : 6.2.0
이온 프레임 워크 버전 : 1.3.1
이온 CLI 버전 : 2.1.1
이온 앱 해방 버전 : 2.1.1
IOS-배포 버전 : 1.8.6
IOS-SIM 버전 : 5.0.8
OS : 맥 OS X 시에라
노드 버전 : V6.3.0
엑스 코드 버전 : 엑스 코드 8.0 빌드 버전? N 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> 

사람이이 문제를 해결하는 방법을 알고 있나요?

답변

0

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. 꼬리말 안에 모든 입력을하는 대신 매번 추가하고 제거합니다. 그렇게하면 꼬리말 안에 입력이 하나만 있습니다. 이것은 꽤 잘 작동하는 것 같습니다. 두 번째로 컨트롤러에 다음 코드를 추가하여 팬텀 키보드 케이스를 처리했습니다.

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

JS 내가 솔루션을 파악하고 더 나은 작동하도록

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

그럴 수도 있지만 사용자가 j가 아닌 포커스를 시작해야합니다. 그래서 탭/clcik에있을 것입니다. –