javascript - 允许 Polymer paper-dialog 的模糊(专注于其他项目 - 输入字段在 paper-dialog 之外)

Question

我有一个绝对定位的元素，它在纸张对话框的外面，(它是一个 body > div)。
我在 div 中有几个输入字段，我希望能够在其中输入一些文本，
但 paper-dialog 并没有让它离开焦点，引用 this关联。

Here是演示该问题的代码笔的链接。
在使用其中一个按钮打开纸质对话框之前和之后，尝试在输入字段 (#my_div) 中输入文本

因此，document.activeElement 始终是 paper-dialog，因此我无法在其外部的输入字段中输入文本。 (document.activeElement 在点击任何地方时记录在控制台中)

因此，当 paper-dialog 打开时，我无法点击/关注我的 div 中的输入元素，有什么解决办法吗？

P.S:我主要是在寻找不更改 polymer 代码的解决方案(例如处理事件或通过 dom 属性更改配置)，假设我在主站点上运行本地自定义 JS 脚本。

Answer 1

在不更改 Polymer 代码的情况下尝试捕捉输入的点击，并以编程方式点击打开的对话框按钮，如下所示:

  <div id="my_div">
    <input type="text" placeholder="Enter text" />
  </div>
  <script>
          document.getElementById('my_div').onclick = function()       {
            document.querySelectorAll('x-dialog paper-dialog:not([aria-hidden="true"]) paper-button')[0].click();
            document.getElementById("my_div").firstElementChild.focus();
      }      
  </script>

检查 codepen here并验证其是否按预期工作。