javascript - 如果 contentEditable 父元素是第一个子元素，则无法删除该元素

Question

问题

我正在构建一个自定义 bool 搜索输入，该输入应该接受一些“ bool 标签气泡”形式的 bool 标签，这些“ bool 标签气泡”可以通过单击添加到查询中。基本上，用户可以单击“AND” bool 标记并将其添加到输入中，而不是键入 {AND}。请参阅附图以了解布局 - /image/dFaq8.png

LE:此行为似乎仅发生在 Chrome 上。

关于问题:如果首先在输入中添加标签(如布局示例图片中所示)，并且在添加标签后，类型字符仅在标签之前返回并按退格键，则标签将不会获得已删除。

只有当用户删除所有添加的字符时，才能通过退格键删除标签 - 基本上是在末尾移动插入符号，然后通过退格键删除所有内容。

我已经尝试过的

最初，我在问题和所有跨度之间建立了联系，这些跨度是当我使用“左/右”箭头键在字符之间向 bool 标记移动时生成的。因此，我编写了一些代码，每次按下一个键时，我都会扫描 contentEditable 父级并清除创建的所有 span 和 brs 。这清除了一些奇怪的情况，但如果它是第一个元素并且 bool 标记后面有字符或其他元素，我仍然无法删除该标记。

几个小时前我发现了这个 - contenteditable div backspace and deleting text node problems 。插入 bool 标签的函数将标签创建为元素。我尝试按照该帖子中的建议创建节点元素。即使作为按钮，如果我的元素是第一个元素并且其后有字符，则无法删除它。

我的一些代码

对于我当前使用 bool 标记作为元素的版本，这是在单击时创建我的 bool 标记并将它们添加到父元素的方法。

            addBooleanTag($event){
                this.$refs.divInput.focus();
                if(this.typed == false & this.input_length == 0){
                    this.$refs.divInput.innerHTML = ''
                    var space = '';
                    this.typed = true
                    this.saveCursorLocation();
                }
                rangy.restoreSelection(this.saved_sel);

                var node = document.createElement('img');
                node.src = $event.img;
                node.className = "boolean-button--img boolean-button--no-margin";
                node.addEventListener('click', () => {
                    this.$refs.divInput.removeChild(node);
                })
                this.insertNode(node);
                this.saveCursorLocation();
            },

这就是 contentEditable 父元素的样子

                <div 
                        @keydown.enter.prevent
                        @blur="addPlaceholder"
                        @keyup="saveCursorLocation(); clearHtmlElem($event)"
                        @input="updateBooleanInput($event); clearHtmlElem($event)"
                        @paste="pasted"
                        v-on:click="clearPlaceholder(); saveCursorLocation(); deleteBooleanTag();"
                        class="input__boolean input__boolean--no-focus"
                        ref="divInput"
                        contenteditable="true">Boolean search..</div>

这是清除我的 contentEditable 父级的中断和跨度的方法

            clearHtmlElem($event){
                var i = 0;
                var temp = $event.target.querySelectorAll("span, br");
                if(temp.length > 0){
                    for(i = 0; i < temp.length; i++){
                        if(!temp[i].classList.contains('rangySelectionBoundary')){
                            if (temp[i].tagName == "br"){
                                temp[i].parentNode.removeChild(temp[i]);
                            } else {
                                temp[i].outerHTML = temp[i].innerHTML;
                            }
                        }
                    }
                }
            },

预期行为与实际结果

我希望当我按退格键并在 bool 标记(img 元素)后面插入插入符时，可以删除该元素。正常行为。相反，它什么也不做。删除添加的元素/ bool 标记的唯一方法是该标记是最后要删除的内容。

请查看我在重现问题时制作的 gif。 /image/lAOyV.jpg - 当控制台“吓坏了”时，基本上是我在该 img 元素/ bool 标记上按了退格键，并且该元素拒绝被删除。

Answer 1

在一些帮助下，我设法解决了这个问题。我在这里发布此内容是为了那些对 contentEditable 有问题的人。

不要设置 contentEditable 元素的样式。我在 contentEditable div 上有一些样式，这弄乱了很多东西，例如插入符定位、退格键无法正常工作等。在它周围进行环绕并移动该包装器上的样式。

LE:contentEditable 元素行为异常的一个(也可能是主要原因)原因是附加了 display: flex。