Question

我有一个发送消息的模态，为了让键盘显示，我必须在触发模态后将焦点设置在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）似乎的工作方式。这是可能的，还是有一种标准方法用键盘和textarea显示模态？

Answer 1

我通过将屏幕禁用设置为true来修复屏幕闪烁：

var willColliedVar:boolean;

function WillColllide():boolean{
    var hit:RaycastHit;
    if(Physics.Raycast(distenceDitactorFl.transform.position,distenceDitactorFl.transform.forward,hit) && hit.collider.tag =="wall") {
        var hitDistence = Mathf.RoundToInt(hit.distance);
        if(hitDistence >=4 && hitDistence<=5){      
            return true;    
        }
    }
    if (Physics.Raycast(distenceDitactorFr.transform.position,distenceDitactorFr.transform.forward,hit, 5) && hit.collider.tag =="wall") {
        var hitDistence2 = Mathf.RoundToInt(hit.distance);
        if(hitDistence2 >=4 && hitDistence2<=5){
            return true;    
        }
    }
    return false;
}
function MoveForward():void{
    wheelRr.motorTorque = maxTorque * 0.25;
    wheelRl.motorTorque = maxTorque *0.25;
}
function TurnStraight():void{
    wheelFl.steerAngle = 0;
    wheelFr.steerAngle = 0;
}

function TurnLeft(steerAngle:int):void{
    wheelFl.steerAngle = -steerAngle;
    wheelFr.steerAngle = -steerAngle;
}
function Update () {
    MoveForward();
    if(willColliedVar){
        TurnRight(steerRotationLow);
    }else{
        TurnStraight();
    }
}
function LateUpdate () {

}
function FixedUpdate(){
    willColliedVar = WillColllide();
}

Checkout Ionic Keyboard iOS Notes here

Answer 2

离子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。但是我认为闪烁只是出现在那个迟钝的婊子身上，对吗？

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

2 个答案: