问题

我正在构建一个自定义的布尔搜索输入，该输入应接受一些“布尔标签气泡”形式的布尔标签，可以通过单击将其添加到查询中。基本上，无需键入{AND}，用户可以单击“ AND”布尔标记并将其添加到输入中。请查看所附图片以了解布局-https: //i.imgur.com/Fwa00zA.png

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

关于问题：如果在输入中首先添加标签（如布局示例图片中所示），并且在添加标签后，类型字符仅在标签之前返回并按Backspace键，则标签将不会被删除。

仅当用户删除所有添加的字符时，才可以通过退格键删除标签-基本上在最后移动插入记号，然后通过退格键删除所有内容。

我已经尝试过的

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

几个小时前，我发现了这个-可编辑的div退格键，并删除了文本节点问题。插入我的布尔标签的函数将标签创建为元素。我尝试按照该帖子中的建议创建节点元素。即使作为按钮，如果我的元素是第一个元素，但后面有字符，则不能删除它。

我的一些代码

对于以boolean标签作为元素的当前版本，这是一种在单击时创建我的boolean标签并将其添加到父元素的方法。

            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>

这是清除break和span的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;
                            }
                        }
                    }
                }
            },

预期行为与实际结果

我希望当我在boolean标记（img元素）之后的尖号后按退格键时，删除该元素。正常的行为。相反，它什么也不做。删除添加的element / boolean标签的唯一方法是，如果标签是最后要删除的东西。

请查看我在重现问题时制作的此gif。https://imgur.com/a/vAXop2s-控制台“怪异”时，基本上是我对img元素/布尔标签和拒绝删除的元素按了退格键。