使用withBackdrop进行纸对话框可以防止控件通过选项卡进行聚焦。

Question

我有一个纸对话框，它使用带背景的属性。我注意到，在单击不使用with-属性的纸面对话框中的任何位置后，我可以按tab键，浏览器将焦点放在输入元素上：

​

addEventListener('WebComponentsReady', function() {
  Polymer({
    is: 'x-example',
    ready: function() {
      this.$$('paper-dialog').open();
    }
  });
});

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <paper-dialog>
      <h2 class="header">Hello</h2>
      <paper-input
        label="Focusable input"
        tabindex
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>

​

但是，如果设置了with- focus属性，浏览器将不会聚焦输入元素：

​

addEventListener('WebComponentsReady', function() {
  Polymer({
    is: 'x-example',
    ready: function() {
      this.$$('paper-dialog').open();
    }
  });
});

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <paper-dialog with-backdrop>
      <h2 class="header">Hello</h2>
      <paper-input
        label="Focusable input"
        tabindex
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>

​

是否有一种方法可以有背景，并仍然允许对话框通过键盘导航？

设备信息:我在OSX上运行Chrome v50时遇到了这个问题。

Answer 1

似乎与您正在使用的版本有问题。我在聚合物公司的网站上和我当地的网站上试过了，这似乎很好。下面是我使用的版本：

纸面对话: 1.0.4

聚合物: 1.3.2

纸张输入: 1.0.18

我还会建议你为同样的话题打开一个关于Github的文章

Answer 2

在演示中，我在输入元素中包含tabindex属性，而没有指定值。移除此属性可使输入具有焦点：

​

addEventListener('WebComponentsReady', function() {
  Polymer({
    is: 'x-example',
    ready: function() {
      this.$$('paper-dialog').open();
    }
  });
});

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">

<dom-module id="x-example">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <paper-dialog with-backdrop>
      <h2 class="header">Hello</h2>
      <paper-input
        label="Focusable input"
        type="text">
      </paper-input>
    </paper-dialog>
  </template>
</dom-module>

<x-example></x-example>

​