代码之家 › 专栏 › 技术社区 › Tobi

Contenteditable:如何在按del或backspace时完全删除span

selection range html javascript

Tobi · 技术社区 · 7 年前

我有一个 contenteditable div,如下面的HTML所示(插入符号由 |

我想删除 span.label 按下时 退格 或 Name 在一次按键中被删除)

<div contenteditable="true">
   Hallo, <span class="label">Name</span>|,
   this is a demonstration of placeholders!
   Sincerly, your
   <span class="label">Author</span>
</div>

2 回复 | 直到 7 年前

Dekel 7 年前

您需要检查光标是否位于跨度末端的准确位置,如果是,请将其删除:

document.querySelector('div').addEventListener('keydown', function(event) {
    // Check for a backspace
    if (event.which == 8) {
        s = window.getSelection();
        r = s.getRangeAt(0)
        el = r.startContainer.parentElement
        // Check if the current element is the .label
        if (el.classList.contains('label')) {
            // Check if we are exactly at the end of the .label element
            if (r.startOffset == r.endOffset && r.endOffset == el.textContent.length) {
                // prevent the default delete behavior
                event.preventDefault();
                if (el.classList.contains('highlight')) {
                    // remove the element
                    el.remove();
                } else {
                    el.classList.add('highlight');
                }
                return;
            }
        }
    }
    event.target.querySelectorAll('span.label.highlight').forEach(function(el) { el.classList.remove('highlight');})
});

span.label.highlight {
    background: #E1ECF4;
    border: 1px dotted #39739d;
}

<div contenteditable="true">
 Hallo, <span class="label">Name</span>|,
 this is a demonstration of placeholders!
</div>

我没有执行 del 关键功能,但总体思路是存在的,我认为您可以根据上述示例完成它

asmmahmud 7 年前

<div contenteditable="true" id="editable">
 Hallo, <span class="label">Name</span>|,
 this is a demonstration of placeholders!
</div>

        document.addEventListener('keydown', function (e) {
            var keycode = event.keyCode;
            console.log(keycode);
            if (keycode === 8 || keycode === 46) {
                var spnLables = document.querySelectorAll('#editable span.label');
                if (spnLables.length) {
                    Array.prototype.forEach.call(spnLables, function (thisnode) {
                        document.getElementById('editable').removeChild(thisnode);
                    });

                }

            }
        });

推荐文章

habrewning · Python是否提供range()作为生成器?

2 年前

Thinkpad · Excel引用基于字符串的范围

2 年前

tanmay · 如何检查列表中的元素是否具有重叠的数值

2 年前

Spd · vba中的范围变量不接受基于指针的值

7 年前

not2qubit · 如何在Ruby中将一个范围为的值字符串转换为一个数组

7 年前

fmdaboville · Elasticsearch Java Jest客户端查询生成器范围与布尔查询

7 年前

Mahhdy · VBA-使用RefEdit复制工作簿之间的范围

7 年前

AlisaM · 是否可以使用不带数值的范围滑块,而是显示内容?

7 年前

TryingToGain · 在Python中重写CSV文件会弄乱行的索引

7 年前

Jan Wytze · postgresql 10日期范围限制

7 年前