android - Ionic，在 iOS 上将按钮保持在键盘上方

Question

我需要此页面底部的“确定”按钮在打开时保持在键盘上方。如左侧屏幕截图所示，它适用于 Android，但不适用于 IOS(右侧屏幕截图)。

你能帮我写代码吗？

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

然后 3 期 ;)

这是一个视频: 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>

指令.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);
              });
            }

        }
      }
    })