Полимерная блокировка ввода с клавиатуры?
Я унаследовал расширение Adobe CEP на работе. Попытка обернуть мою голову вокруг проблемы, которая делает это так, абсолютно никакой ввод с клавиатуры не работает на вводе текста. Чтобы уточнить, абсолютно никакой клавиатурный ввод не работает в текстовых вводах Polymer. Входные данные сфокусированы, но если я что-то наберу в них, я получу звук предупреждения об ошибке Mac. Единственным ключом, который мне удалось сделать, была "вкладка". Все остальное не работает. Он построен с использованием Polymer. Сначала я не был уверен, что является причиной проблемы, и так как я унаследовал этот проект, я не знал, с чего начать. Примерно после дня отладки я думаю, что это как-то связано с Полимером. Причина этого в том, что если я удаляю HTML-элемент Polymer, который его отображает, и просто помещаю туда ввод, то ввод работает. Это только кажется, чтобы заблокировать ввод внутри <template> ... </template>, Я искал по всему Интернету какие-либо подсказки о том, что может заставить Полимер блокировать этот ввод, нет ошибок в консоли или чем-то еще, и я пришел с короткими руками.
У кого-нибудь есть понимание этого?
1 ответ
Я сталкиваюсь с той же проблемой. На самом деле, это связано не с полимером, а с полифилом веб-компонентов. Если вы попробуете следующий исходный код внутри расширения 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 и зарегистрировались для всех модификаторов. За исключением копирования-вставки на основе клавиатуры, теперь у нас есть полная функциональность с нашими веб-компонентами (в основном на основе PolymerElement/LitElement).