释放鼠标按钮时，内容可编辑的 <span> 标记取消选择答案

【问题标题】：Content-editable <span> tag unselects when the mouse button is released释放鼠标按钮时，内容可编辑的 <span> 标记取消选择
【发布时间】：2014-04-06 12:08:15
【问题描述】：

我正在尝试使用内容可编辑的 span 标签作为可变宽度的内联文本输入框。一切正常，除了当我专注于框时无法选择整个文本。切换到可编辑范围可以正常工作，但是当我单击它时，鼠标向上事件似乎取消了我刚刚所做的选择。我在 Ubuntu 上使用最新的谷歌浏览器。

http://jsfiddle.net/6b3tP/

这是 HTML：

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

这是 JS：

$('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);
});

【问题讨论】：

鼠标抬起后保持选中状态 - Chrome / Mac

标签： javascript jquery contenteditable

【解决方案1】：

我建议延迟使用window.setTimeout() 进行选择，以便在做任何事情之前让尘埃落定。也可以稍微简化一下代码。

演示：http://jsfiddle.net/6b3tP/1/

代码：

$('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);
});

【讨论】：