iOS 8 升级 - 全屏模式：屏幕键盘在第一次点击文本字段时短暂闪烁，在第二次点击时正确显示答案

【问题标题】：iOS 8 Upgrade - Full Screen Mode: Onscreen keyboard flashes briefly on first tap of text field, appears properly on second tapiOS 8 升级 - 全屏模式：屏幕键盘在第一次点击文本字段时短暂闪烁，在第二次点击时正确显示
【发布时间】：2014-10-27 08:15:03
【问题描述】：

我的网络应用（AngularJS HTML5）有一个奇怪的问题。将我的 iPad 升级到 iOS8 后，屏幕键盘的行为很奇怪。在点击文本字段一次后，键盘（非常）短暂闪烁并消失。几乎看不到——屏幕底部只有一道暗光。再次点击后，键盘正常。有其他人遇到过这个问题吗？它快把我逼疯了！

这是输入字段：

HTML：

<input valid-number ng-disabled="planBody.isSubmitted==='Y'" type="tel" maxlength="13" ng-model="planBody.campaign.campaignparams.budget" ng-required="true" currency-input=""/>

JS：

    .directive('validNumber', function() {
      return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          if(!ngModelCtrl) {
            return; 
          }

          ngModelCtrl.$parsers.push(function(val) {
            if(angular.isUndefinedOrNull(val))
            {
              val = "";
            }
            var clean = val.replace( /[^0-9]+/g, '');
            if (val !== clean) {
              ngModelCtrl.$setViewValue(clean);
              ngModelCtrl.$render();
            }
            return clean;
          });

          element.bind('keypress', function(event) {
            if(event.keyCode === 32) {
              event.preventDefault();
            }
          });
        }
      };
    })
    .directive('currencyInput', function($filter, $browser) {
    return {
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModelCtrl) {
            var listener = function() {
                var value = $element.val().replace(/,/g, '');
                if(value !== ""){
                   $element.val($filter('number')(value, false));
                }
                $scope.markForSaveAlert();
            };

            // This runs when we update the text field
            ngModelCtrl.$parsers.push(function(viewValue) {
                return viewValue.replace(/,/g, '');
            });

            // This runs when the model gets updated on the scope directly and keeps our view in sync
              ngModelCtrl.$render = function() {
              if(ngModelCtrl.$viewValue!==''){
                 $element.val($filter('number')(ngModelCtrl.$viewValue, false));
                }
             };

            $element.bind('change', listener);
            $element.bind('keydown', function(event) {
                var key = event.keyCode;
                // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
                // This lets us support copy and paste too
                if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
                  return;
                }
                $browser.defer(listener); // Have to do this or changes don't get picked up properly
            });

            $element.bind('paste cut', function() {
                $browser.defer(listener);  
            });
        }

    };
})

更新：这似乎只发生在全屏模式下，而不是在普通的移动 Safari 中

【问题讨论】：

可能是 iOS8 的问题，iOS 8.0.x 有很多类似的问题尝试升级到 iOS 8.1，希望能解决您的问题。
我在 8.1 上运行。仍然有问题。是否有指向 8.0.x 上发生的常见问题的链接？@Yuvrajsinh
你在对文本字段进行任何操作吗？
我已经添加了上面的代码。只是几个 AngularJS 指令

标签： html angularjs ipad ios8 on-screen-keyboard

【解决方案1】：

我找到了这个问题的答案。我使用 Safari 控制台调试器查看触发了哪些事件。看起来 ng-touch (Angular Touch) 导致了这个问题，触发了多个事件以及被触发的常规点击事件。我删除了 Angular Touch（无论如何都没有使用）并且功能开始正常工作。

【讨论】：