聚合物阻止键盘输入?



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

有人对此有任何见解吗?

我面临着同样的问题。实际上,它与聚合物无关,而是与Web组件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>

面对同样的问题,我们最终发现有记录表明,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

最新更新