Question

我在工作中继承了Adobe CEP扩展。试图围绕一个问题来解决这个问题，这使得键盘的输入绝对没有输入文本输入。详细说明，在Polymer的文本输入中绝对没有键盘输入。输入得到了集中，但如果我在其中输入任何内容，我会收到mac错误提示音。我能够做的唯一关键是＆＃34; tab＆＃34;。其他任何东西都行不通。它是使用Polymer构建的。起初我不确定是什么导致了这个问题，而且由于我继承了这个项目，我很困惑从哪里开始。经过大约一天的调试后，我认为它与Polymer有些联系。这样做的原因是，如果我删除呈现它的Polymer HTML元素，并在那里输入一个输入，则输入有效。它似乎只阻止<template> ... </template>内的输入。我已经在互联网上寻找任何可能导致聚合物阻止此输入的线索的任何线索，控制台或任何东西都没有错误，而且我已经做空了。

有没有人对此有任何见解？

Answer 1

我正面临着同样的问题。实际上，它与聚合物无关，但与Webcomponents的polyfill有关。如果您尝试在Adobe 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>

Answer 2

面对同样的问题，我们最终发现有文件记载，除非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-events

聚合物阻挡键盘输入？

2 个答案: