0

我在工作中继承了 Adob​​e CEP 扩展。试图解决一个问题，该问题使得绝对没有键盘输入适用于文本输入。详细地说，在 Polymer 的文本输入中绝对没有键盘输入。输入得到集中，但如果我在其中输入任何内容，我会收到 mac 错误警报声音。我能够工作的唯一关键是“标签”。其他任何事情都不起作用。它是使用 Polymer 构建的。起初我不确定是什么导致了这个问题，而且由于我继承了这个项目，我很困惑从哪里开始。经过大约一天的调试，我相信它与 Polymer 有某种关系。这样做的原因是，如果我删除呈现它的 Polymer HTML 元素，然后在其中放置一个输入，那么输入就可以工作。它似乎只阻止了内部的输入<template> ... </template>. 我已经在整个互联网上寻找任何可能导致 Polymer 阻止此输入的线索，控制台或任何东西都没有错误，而且我手头不足。

有人对此有任何见解吗？

4

2 回答 2

0

我面临同样的问题。实际上，它与聚合物无关，而是与 webcomponents 的 polyfill 有关。如果您在 Adob​​e CEP 扩展中尝试以下源代码，您将看到您可以在两个元素内单击，选择任何文本，但您无法对其进行编辑。

<html>
<head>
    <script>
        // Force all polyfills on
        if (window.customElements) window.customElements.forcePolyfill = true;
        ShadyDOM = {
            force: true
        };
        ShadyCSS = {
            shimcssproperties: true
        };
    </script>
    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <template id="x-foo-from-template">
        <input value="from template">
    </template>
    <script>
        let tmpl = document.querySelector('#x-foo-from-template');

        customElements.define('x-foo-from-template', class extends HTMLElement {
            constructor() {
                super();
                let shadowRoot = this.attachShadow({
                    mode: 'open'
                });
                shadowRoot.appendChild(tmpl.content.cloneNode(true));
            }
        });

        customElements.define('x-foo-from-dynamic', class extends HTMLElement {
            constructor() {
                super();
                let shadowRoot = this.attachShadow({
                    mode: 'open'
                });
                var inputEl = document.createElement('input');
                inputEl.value = "from created element";
                shadowRoot.appendChild(inputEl);
            }
        });
    </script>

    <x-foo-from-template></x-foo-from-template>
    <x-foo-from-dynamic></x-foo-from-dynamic>

</body>

</html>

于 2018-09-15T09:22:00.883 回答
0

面对同样的问题，我们最终发现，Adobe 会将所有按键操作交给主机应用程序，除非它可以确定输入或下拉元素具有焦点。我希望这是通过对document.activeElement. 当涉及到 Shadow DOM 时，Adobe 必须做类似的事情

let target = document.activeElement;
while (target.shadowRoot && target.shadowRoot.activeElement) {
  target = target.shadowRoot.activeElement;
}

为了找到底层<input>元素。

由于这目前不起作用，我们需要使用registerKeyEventsInterest明确地让我们的代码处理所有按键。

var csInterface = new CSInterface();
var keyEvents = [];
// All the keyCodes you need, with the modifiers used
keyEvents.push({ keyCode: 0 });
keyEvents.push({ keyCode: 0, metaKey: true });
// ...
csInterface.registerKeyEventsInterest(JSON.stringify(keyEvents));

我们实际上继续循环 0..255 并注册所有修饰符。除了基于键盘的复制粘贴之外，我们现在拥有我们的 web 组件的全部功能（主要基于 PolymerElement/LitElement）。

https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_8.x/Documentation/CEP%208.0%20HTML%20Extension%20Cookbook.md#register-an-interest-in-specific-key-事件

于 2019-11-27T10:30:02.003 回答