Javascript 内容可编辑<；span>；释放鼠标按钮时取消选择标记

我正在尝试使用内容可编辑的span标记作为可变宽度的内联文本输入框。一切都很好，只是当我聚焦在框上时，我无法让它选择整个文本。选项卡切换到可编辑范围效果很好，但当我单击它时，鼠标向上事件似乎取消选择我刚才所做的选择。我正在Ubuntu上使用谷歌chrome的最新版本

以下是HTML：

<div>
    Inline editable <span contenteditable="true">spans</span> are hard to select.
</div>

---

我建议推迟使用

window.setTimeout（）

进行选择，以便在做任何事情之前让灰尘沉淀下来。您还可以稍微简化代码

演示：

代码：

---

鼠标启动后保持选中状态-Chrome/Mac

$('span').focus(function() {
    var text_node = this.firstChild;
    var text = $(this).text();
    var range = document.createRange();
    range.setStart(text_node, 0);
    range.setEnd(text_node, text.length);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
});

$('span').focus(function() {
    var span = this;
    window.setTimeout(function() {
        var range = document.createRange();
        range.selectNodeContents(span);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }, 1);
});