Question

对于Chrome扩展程序，我使用弹出窗口作为Angular的登录表单。

但是在 OS X 上，当我点击用户名自动完成建议时，弹出窗口会自动关闭，就像您在弹出窗口外单击一样。但它在Windows上运行良好。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <!-- build:css styles/vendor.css -->
  <!-- bower:css -->

  <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css styles/main.css -->
  <link href="styles/main.css" rel="stylesheet">
  <!-- endbuild -->
</head>

<body ng-app="myApp" ng-controller="MainCtrl">

  <div ng-if="loggedIn">
    <p>
      <img src="images/logo-full.png">
    </p>
    <p class=""><strong>You're logged in as:</strong>
    </p>
    <p><i>{{user}}</i>
    </p>
    <br>
    <div class="center-block">
      <button class="btn btn-danger" ng-click="logout()">Log out</button>
      <a class="btn btn-primary pull-right" ng-href="https://example.com/cockpit" target="_blank">Go to Cockpit</a>

    </div>
  </div>

  <div ng-if="!loggedIn">
    <p>
      <img src="images/logo-full.png">
    </p>
    <form ng-submit="login(username, password)">
      <div class="form-group">
        <label for="username" class="sr-only">Email</label>
        <input id="username" class="form-control" type="text" ng-model="username" required placeholder="Email">
      </div>
      <div class="form-group">
        <label for="password" class="sr-only">Password</label>
        <input id="password" class="form-control" type="password" ng-model="password" required placeholder="Password">
      </div>
      <div class="alert alert-danger" role="alert" ng-if="error">{{error}}</div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary" ng-disabled="loading">Log in</button>
      </div>
      <div class="form-group">
        <a href="https://example.com/auth/reset" target="_blank"><small>Forgot your password?</small></a>
      </div>
    </form>
    <div class="margin-top-big">
      <a href="https://example.com/auth/signup" target="_blank" class="btn btn-block btn-success"><strong>Don't have an account? Get started</strong></a>
    </div>
  </div>

  <!-- build:js scripts/vendor.js -->
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/jquery-cookie/jquery.cookie.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <!-- endbower -->
  <!-- endbuild -->
  <script src="lib/myLib.js"></script>

  <!-- build:js scripts/popup.js -->
  <script src="scripts/popup.js"></script>
  <!-- endbuild -->
</body>

</html>

有任何解决方法吗？

Answer 1

似乎OSX处理文本弹出窗口上的单击，因为单击扩展名弹出区域之外的单击会导致它关闭。

我在Safari和Chrome的扩展程序中观察到它，但仅限于OSX。这是Chromium bugtracker中的related ticket。

在某些情况下，您可以创建一个自定义控件，它将使用div来显示弹出内容，从而防止出现此问题。对于自动填充，我认为解决方法不存在。您可以尝试在OSX浏览器中完全禁用自动填充。几乎没有更好的解决方案，但可能适合您。

为什么要在输入自动填充建议点击时关闭Chrome扩展弹出窗口？

1 个答案: