html5 contentEditable элемент внутри shadowRoot не работает на Firefox Mobile - PullRequest
Новая
       12

html5 contentEditable элемент внутри shadowRoot не работает на Firefox Mobile

0 голосов
/ 28 июня 2019

Мне нужно использовать contentEditable div внутри shadow-dom контейнера, все отлично работает в настольных браузерах, но на firefox mobile я не могу писать буквы или цифры, работают только пробелы и некоторые другие символы.

Так что я могу написать -. = /, Но не могу использовать буквы вроде abcde

Кажется, это ошибка Firefox, но может быть есть обходной путь?

Я сделал скрипку, чтобы продемонстрировать свою проблему. https://jsfiddle.net/ors9f05g/


class Test extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: "open" })
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = this.render()
    }

    render() {
        return `
                <style>
                    #editor {
                        width: 90%;
                        margin: 50px 0;
                        height: 300px;
                        background: white;
                        color:black;
                        padding:20px;
                        display: block;
                        border:solid 1px black;
                    }
                </style>
                <div id="editor" contenteditable="true">
                </div>
                `
    }
}

customElements.define("text-editor", Test);
...