Question

我看到的问题出现在移动设备上，特别是我使用带有iOS 10.0的iPhone 6s Plus。

http://codepen.io/AstroDroid/pen/beqjoL

＆＃13;

class AppController {
  status = '';
  customFullscreen;
  constructor(private $scope, private $mdDialog, private $mdMedia, private $mdToast) {
    this.customFullscreen = this.$mdMedia('xs') || this.$mdMedia('sm');
  }

  showDialog(event) {
    var useFullScreen = (this.$mdMedia('sm') || this.$mdMedia('xs')) && this.customFullscreen;

    this.$mdDialog.show({
      controller: LoginDialogController,
      controllerAs: 'dialog',
      templateUrl: 'login-dialog.template.html',
      parent: angular.element(document.body),
      targetEvent: event,
      clickOutsideToClose: true,
      fullscreen: useFullScreen
    })
    .then(credentials => this.showToast(`Thanks for logging in, ${credentials.username}.`),
      () => this.showToast('You canceled the login.'));

    this.$scope.$watch(() => this.$mdMedia('xs') || this.$mdMedia('sm'),
      wantsFullScreen => this.customFullscreen = wantsFullScreen === true);
  }

  showToast(content: string) {
    this.$mdToast.show(
      this.$mdToast.simple()
        .content(content)
        .position('top right')
        .hideDelay(3000)
    );
  }
}

class LoginDialogController {
  username: string;
  password: string;

  constructor(private $mdDialog) { }

  hide() {
    this.$mdDialog.hide();
  }

  close() {
    this.$mdDialog.cancel();
  }

  login() {
    this.$mdDialog.hide({username: this.username, password: this.password});
  }
}

function config($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('blue')
    .accentPalette('orange');
  $mdThemingProvider.theme('input', 'default')
    .primaryPalette('grey')
}

angular
  .module('app', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppController', AppController)
  .config(config);

＆＃13;

.dialogdemoBasicUsage #popupContainer {
  position: relative;
}

#login-dialog {
  max-width: 90%;
  width: 500px;
}

＆＃13;

<div ng-app="app" ng-controller="AppController as login" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak>
  <div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
    <md-button class="md-primary md-raised" ng-click="login.showDialog($event)">
      Login
    </md-button>
  </div>
  <div hide-gt-sm layout="row" layout-align="center center" flex>
    <md-checkbox ng-model="login.customFullscreen" aria-label="Fullscreen Custom Dialog">Force Custom Dialog Fullscreen</md-checkbox>
  </div>

  <div ng-if="login.status" id="status">
    <b layout="row" layout-align="center center" class="md-padding">
      {{login.status}}
    </b>
  </div>

  <script type="text/ng-template" id="login-dialog.template.html">
    <md-dialog id="login-dialog" aria-label="Login" ng-cloak>
      <form name="loginForm" ng-submit="dialog.login()">
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2>Log In</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="dialog.close()">
              <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
          </div>
        </md-toolbar>

        <md-dialog-content>
          <div class="md-dialog-content">
            <md-input-container class="md-block">
              <label>Username</label>
              <input name="username" ng-model="dialog.username" md-autofocus required />
            </md-input-container>
            <md-input-container class="md-block">
              <label>Password</label>
              <input type="password" name="password" ng-model="dialog.password" required />
            </md-input-container>
          </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
          <a href="" class="md-primary">Forgot Password?</a>
          <span flex></span>
          <md-button type="submit" ng-disabled="loginForm.$invalid" class="md-raised md-primary">Login</md-button>
        </md-dialog-actions>
      </form>
    </md-dialog>
  </script>
</div>

＆＃13;

对不起代码，它不会让我发布没有它。一个完整的，有效的例子已经在笔中，所以这不坏，我也不会感觉不好，也不应该。

当我调出模态并聚焦其中一个文本输入并关闭模态时，可以通过＆＃39; X＆＃39;或者通过填写字段并点击“登录”，当模式被解除时，键盘仍然在屏幕上。当我点击“完成”时在键盘上，它被解雇，但随着我点击屏幕上的任何其他地方，它会回来。如果我确保点击“完成”，那么我唯一可以阻止它的方法就是在使用＆＃39; X＆＃39;关闭对话框之前或者点击“登录”。

我猜测问题在于Angular Material＆＃39;隐藏＆＃39;对话框，屏幕键盘仍然认为文本输入有效。

是否有人知道某种解决方法，或者该笔是否未正确使用$ mdDialog？

Answer 1

我找到的解决方法是确保在对话框关闭时输入模糊。我是通过添加

来做到这一点的

this.$document[0].activeElement.blur();

到我的dialog.login()方法。

Angular Material Dialog移动键盘问题

1 个答案: