Question

我们正在使用iOS的离子框架。

在iOS模拟器和Safari浏览器中，对于我们的某个页面，单击textarea会显示键盘，并向上滚动textarea以使其仍然可以查看。

当通过Apple iOS TestFlight存档和处理应用程序时，行为会发生变化。现在，单击textarea显示键盘，但textarea不再向上滚动，因此它被隐藏。

看起来存档过程中的某些内容会导致问题。

这里是代码（上面还有另一个div）。只有一个textarea。

  <div ng-if="!dy_compl">
<div class="wi-bottom item ">
  <div ng-repeat="(key, dy) in element.dys">
    <div id="wi-scroll-div" ng-if="key == dySel" style="height: {{scroller_height}}; overflow: scroll;">
      <div>
        <style>
          p.wi-icon:before {
            background: url("img/old_building.png") no-repeat !important;
          }
        </style>
        <p class="wi-icon" ng-bind-html="dy.intro | to_trusted"></p>
      </div>
      <div ng-if="dy.ref">
        <p class="wi-intro-my3" ng-bind-html="dy.ref.intro | to_trusted"></p>
        <div ng-repeat="data in dy.ref.data track by $index">
          <p class="wi-intro-my3-table" style="margin-left: 5%;" ng-bind-html="data | to_trusted"></p>
        </div>
      </div>
      <label id="wi-input" class="item item-input item-stacked-label">
        <span class="input-label" style="width:100%; max-width: 100%;">
        <div class="wi-bottom-input-label" ng-bind-html="dy.notelabel | to_trusted"></div>
      </span>
        <textarea class="wi-bottom-input" ng-model="dy.note" type="text" placeholder="{{dy.note}}" ng-style="{'background-color': textAreaBackgroundColor}"></textarea>
      </label>
      <button class="wi-bottom-button button button-assertive col text-center" ng-click="dy.saved=true;saveNow()">
        Save Notes
      </button>
      </br>
    </div>
  </div>
</div>

Answer 1

如果你无法使用插件，请查看我在一个项目中使用的代码。看起来有点开销，但它有效：

模板：

<ion-content scroll-handle="user-profile-scroll">
    <textarea maxlength="160" ng-model="currentUser.bio" ng-readonly="!editMode || focusAddInterestInput" placeholder="Write your bio..." class="user-bio"><    </textarea>
</ion-content>

控制器：

$scope.windowHeight = window.innerHeight;
$scope.keyboardHeight = 0;

$scope.$on('$ionicView.loaded', function() {

    var scrollView = {scrollTo: function() { console.log('Could not resolve scroll delegate handle'); }};

    $timeout(function() {

        var instances = $ionicScrollDelegate.$getByHandle('user-profile-scroll')._instances;
        instances.length && (scrollView = instances[instances.length - 1]);

    }).then(function() {

        $scope.unbindShowKeyboardHandler = $scope.$on('KeyboardWillShowNotification', function(evt, info) {

            $scope.keyboardHeight = info.keyboardHeight;

            var input = angular.element(document.activeElement);
            var body = angular.element(document.body);
            var top = input.prop('offsetTop');
            var temp = angular.element(input.prop('offsetParent'));
            var tempY = 0;

            while (temp && typeof(temp.prop('offsetTop')) !== 'undefined') {

                tempY = temp.prop('offsetTop');
                top += tempY;
                temp = angular.element(temp.prop('offsetParent'));

            }

            top = top - (scrollView.getScrollPosition().top || 0);

            var inputHeight = input.prop('offsetHeight');

            var requiredSroll = $scope.windowHeight - $scope.keyboardHeight > top + inputHeight + 11 ? 0 : $scope.windowHeight - $scope.keyboardHeight - top - inputHeight - 12;

            $timeout(function(){ scrollView.scrollTo(0, - requiredSroll || 0, true); });

        });

        $scope.unbindHideKeyboardHandler = $scope.$on('KeyboardWillHideNotification', function(evt, info) {
                                                              console.log(evt, info);
            $scope.keyboardHeight = 0;

            $timeout(function() { scrollView.scrollTo(0, 0, true); });

        });

        $scope.$on('$destroy', function() {

            $scope.unbindShowKeyboardHandler();
            $scope.unbindHideKeyboardHandler();

        });

    });
});

andm终于在app.js：

window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardShowHandler(info){
    $rootScope.$broadcast('KeyboardWillShowNotification', info);
}

function keyboardHideHandler(info){
    $rootScope.$broadcast('KeyboardWillHideNotification', info);
}

Answer 2

原来我们有一个使用以下方法手动禁用键盘滚动的视图：

cordova.plugins.Keyboard.disableScroll(true)

我们在切换到另一个视图时无法重新启用此功能。

结果是，在模拟器中，滚动禁用没有将范围遍历到新页面，而在归档和TestFlight之后，它确实没有。

感谢其他答案，评论。

Apple Testflight处理后，Ionic Framework textarea键盘滚动问题

2 个答案: