0

with-backdrop プロパティを使用する紙のダイアログがあります。with-backdrop プロパティを使用しないpaper-dialog 内の任意の場所をクリックした後、タブ キーを押すと、ブラウザーが入力要素にフォーカスすることに気付きました。

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-backdrop プロパティを設定すると、ブラウザーは入力要素にフォーカスしません。

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 を実行すると、この問題が発生します。

4

2 に答える 2

0

使用しているバージョンに問題があるようです。PolymerのWebサイトとローカルで試してみましたが、うまく機能しているようです。以下は私が使用したバージョンです：

ペーパーダイアログ: 1.0.4

ポリマー: 1.3.2

用紙入力: 1.0.18

また、同じ問題について Github で問題を開くことをお勧めします。

于 2016-06-15T18:04:30.680 に答える
0

デモでは、値を指定せずに入力要素に 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>

于 2016-06-15T18:15:44.240 に答える