清除范围文本字段

Question

我正在使用Span文本字段，我希望在点击它们时将其清除，我该怎么办？

我的代码如下所示：

<div class="text3">

<span contenteditable="true">något</span>
</div>

Answer 1

如果您每次点击都清除它，您将如何编辑文本？ 无论如何这里是一个技巧：

<div class="text3">
<span contenteditable="true" onclick="this.innerText=''">något</span>
</div>

Answer 2

使用节点的textContent属性设置“内部”文本，这是实际的文本节点。

要在跨度获得编辑其内容的焦点时清除文本，请使用onfocus属性设置空字符串：

span{
    display:inline-block;
    min-width:30px;
    min-height:18px;
    outline:1px dotted grey;
}

<div class="text3">
    <span contenteditable="true" onfocus="this.textContent='';">något</span>
</div>

由于内容将设置为空字符串，因此<span>内联元素几乎不可见而不输入任何文本。您可能应该在界面中添加一些视觉效果以引导用户。上面的CSS会将它保持在任意最小尺寸，添加一个轮廓以防止“输入”消失。

此外，您可以选择文本内容，而不是删除。不幸的是，Range interface似乎不起作用for contenteditable non-input elements，因此有资格获得另一个问题。