angularjs – 用textarea和键盘显示离子模态的正确方法

前端之家收集整理的这篇文章主要介绍了angularjs – 用textarea和键盘显示离子模态的正确方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个发送消息的模态,为了让键盘显示,我必须在触发模态后将焦点设置在textarea上.

HTML

  1. <script id="new-post.html" type="text/ng-template">
  2. <div class="modal">
  3. <form ng-submit="sendPost(post)">
  4. <ion-header-bar class="bar-royal">
  5. <button class="button button-clear button-light" ng-click="closeNewPost()">Cancel</button>
  6. <h1 class="title">New Message</h1>
  7. <button type="submit" class="button button-clear">Post</button>
  8. </ion-header-bar>
  9. <ion-content>
  10.  
  11. <div class="list">
  12. <label class="item item-input">
  13. <textarea class="textareas" id="postMessageInput" ng-model="$parent.post.message" placeholder="What do you want to say?" autofocus ></textarea>
  14. </label>
  15. </div>
  16. </ion-content>
  17. </form>
  18. </div>

控制器:

  1. $ionicModal.fromTemplateUrl('new-post.html',function(modal) {
  2. $scope.postModal = modal;
  3. },{
  4. scope: $scope,focusFirstInput: true
  5. });
  6. $scope.newPost = function() {
  7. $scope.postModal.show().then(document.getElementById('postMessageInput').focus());
  8. };

会发生的是模态首先向上滑动,然后键盘向上滑动.当模态首次显示时,屏幕有时闪烁.整个经历根本不顺利.有时,textarea甚至被推到模态标题下.

理想情况下,我希望模式使用已在视图上呈现的键盘向上滑动,就好像键盘嵌入到模态中一样.这就是其他应用程序(ios)的工作原理.这是可能的,还是有标准方法键盘和textarea显示模态?

我通过将屏幕禁用设置为true来修复屏幕闪烁:
  1. cordova.plugins.Keyboard.disableScroll(true)

Checkout Ionic Keyboard iOS Notes here

猜你在找的Angularjs相关文章