Question

我有一个绝对定位的元素，位于纸的对侧边，（它是一个body> div）。
我在div中有一些输入字段，希望可以在其中输入一些文字，
但是纸质对话不允许它专注于this链接。

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

由于这个原因，document.activeElement始终为paper-dialog，因此我无法在其外部的输入字段中输入文本。（document.activeElement在控制台中单击任何位置均已登录）

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

P.S：我主要是在寻找一种无需更改聚合物代码（例如通过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并确认其正常工作。

Answer 2

好像没有办法解决它，我最终使用了一种变通方法，即将具有固定位置的文本框附加到纸张对话框中，然后在对话框关闭时将其恢复到正常的dom位置

Answer 3

我们找到了解决问题的方法。希望这对您也有帮助。

new paper.Tool();

  let startDragPoint;

  paper.tool.onMouseDown = (event) => {
    document.getElementById('elementID').blur();
    startDragPoint = event.point;
  };

允许聚合物纸张对话框模糊（聚焦于其他项目-纸张对话框外部的输入字段）

3 个答案: