2015-01-18 2 views
8

У меня есть модальный для отправки сообщения, и для того, чтобы показать клавиатуру, я должен установить фокус на textarea после запуска модального.Правильный способ показать ионный модальный текст и клавиатуру

HTML

<script id="new-post.html" type="text/ng-template"> 
    <div class="modal"> 
    <form ng-submit="sendPost(post)"> 
     <ion-header-bar class="bar-royal"> 
      <button class="button button-clear button-light" ng-click="closeNewPost()">Cancel</button> 
      <h1 class="title">New Message</h1> 
      <button type="submit" class="button button-clear">Post</button>   
     </ion-header-bar> 
     <ion-content> 

      <div class="list"> 
      <label class="item item-input"> 
       <textarea class="textareas" id="postMessageInput" ng-model="$parent.post.message" placeholder="What do you want to say?" autofocus ></textarea> 
      </label> 
      </div> 
     </ion-content> 
    </form> 
    </div> 

Контроллер:

$ionicModal.fromTemplateUrl('new-post.html', function(modal) { 
    $scope.postModal = modal; 
}, { 
    scope: $scope, 
    focusFirstInput: true 
}); 
$scope.newPost = function() { 
    $scope.postModal.show().then(document.getElementById('postMessageInput').focus());  
}; 

Что происходит, что модальной скользит вверх, а затем клавиатура скользит вверх. Иногда появляется мерцание экрана, в то время как модальный первый показывает. Весь опыт не является гладким. Иногда textarea даже подталкивается под модальным заголовком.

В идеале, я хочу, чтобы модальный слайд вверх с клавиатурой, уже отображенной на экране, как будто клавиатура встроена в модальную. Вот как работают другие приложения (ios). Возможно ли это, или есть стандартный метод для показа модала с клавиатурой и текстовой областью?

+0

Я хотел бы добавить, что когда клавиатура отображается (только из-за фокусом быть установлены на текстовом поле), что фокус больше не находится в текстовом поле, и вам нужно щелкнуть в текстовой области до ввода. – lilbiscuit

ответ

0

Ионный keyboard plugin имеет функцию Keyboard.show();. Я бы предположил:

$scope.newPost = function() { 
     cordova.plugins.Keyboard.show(); 
     // set a timeout of 100 here (maybe) 
     $scope.postModal.show().then(document.getElementById('postMessageInput').focus()); 
    }; 

не проверено.

Примечание: Это только для android. Но я думаю, что мерцание просто появляется на этой лохматой суке, верно?

Смежные вопросы