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

Question

我需要此页面底部的 "OK" 按钮在打开时保持在键盘上方。它适用于 Android，如您在左侧屏幕截图中所见，但不适用于 IOS（右侧屏幕截图）。

你能帮我看看代码吗？

此外，如您所见，"select-on-focus" 指令在 iOS 中不起作用... 小键盘应该是 iOS 上的数字小键盘（phone 小键盘）……但事实并非如此。

然后 3 期 ;)

代码如下：

<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

对于 keyboard/scroll 问题，我没有找到比这个指令更好的（仅适用于 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 is an attribute directive which will cause an element to float above the keyboard when the keyboard shows. Currently only supports the ion-footer-bar directive.

<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/

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

Ionic, keep button above keypad on iOS

android

ios

angularjs

ionic-framework