Ionic，在 iOS 上将按钮保留在键盘上方

Question

我需要此页面底部的“确定”按钮在打开时保持在键盘上方。它可以在 Android 上运行，如左侧的屏幕截图所示，但不能在 iOS 上运行（右侧的屏幕截图）。

此外，正如您所看到的，“select-on-focus”指令在 iOS 中不起作用。键盘应该是 iOS 上的数字键盘（电话键盘）……但事实并非如此。

这是视频：https://youtu.be/_bOWGMGesgk

这是代码：

<div class="wrapperFlex withNextButton">
<div class="itemTitle">
    <div class="text">
        {{'paramQuestions.weight' | translate }}
    </div>
</div>

<div id="weightdata" class="itemParameters weightdataclass row">
    
    <input class="weightinput" type="number" name="userweight" ng-min="{{data.minWeight}}" ng-max="{{data.maxWeight}}" ng-model="data.realWeight" ng-change="updateViewGenVol(data.weightunit, data.userweight, data.BLfactorValue);saveUserWeight()" select-on-focus required></input>
    <div class="weightunitradios">
        <ion-checkbox class="checkboxes checkbox-blueboardline" ng-model="data.weightunit" ng-true-value="'kg'" ng-false-value="'lbs'" ng-change="saveWeightUnit(); changeMinMax(); convertWeightInput(); saveUserWeight();">kg</ion-checkbox>
        <ion-checkbox class="checkboxes checkbox-blueboardline" ng-model="data.weightunit" ng-true-value="'lbs'" ng-false-value="'kg'" ng-change="saveWeightUnit(); changeMinMax(); convertWeightInput(); saveUserWeight();">lbs</ion-checkbox>
    </div>
</div>
</div>

directives.js：

.directive('selectOnFocus', function ($timeout) {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          var focusedElement = null;

          element.on('focus', function () {
              var self = this;
              if (focusedElement != self) {
                  focusedElement = self;
                  $timeout(function () {
                      self.select();
                  }, 10);
              }
          });

          element.on('blur', function () {
              focusedElement = null;
          });
        }
  }
})

Answer 1

对于键盘/滚动问题，我没有找到比这个指令更好的（仅适用于ios）：

.directive('keyboardResize', function ($ionicScrollDelegate) {
      return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {

            function onKeyboardShow (e) {
                element.css('bottom', e.keyboardHeight + 'px');
                $ionicScrollDelegate.$getByHandle(attrs.delegateHandle).resize();
                console.log("ouiaaaaaaaaa")
            };
            function onKeyboardHide (e) {
                element.css('bottom', '');
                $ionicScrollDelegate.$getByHandle(attrs.delegateHandle).resize();
            };

            if (ionic.Platform.isIOS()) {
              ionic.on('native.keyboardshow', onKeyboardShow, window);
              ionic.on('native.keyboardhide', onKeyboardHide, window);

              scope.$on('$destroy', function () {
                  ionic.off('native.keyboardshow', onKeyboardShow, window);
                  ionic.off('native.keyboardhide', onKeyboardHide, window);
              });
            }

        }
      }
    })      

Answer 2

Ionic 实际上默认支持此功能。查看

keyboard-attach

属性指令。

keyboard-attach 是一个属性指令，当键盘显示时，它将导致元素浮动在键盘上方。目前仅支持 ion-footer-bar 指令。

<ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
   <h1 class="title">Title!</h1>
</ion-footer-bar>

来源：http://ionicframework.com/docs/api/directive/keyboardAttach/