Question

我正在尝试使用内容可编辑的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);
});

Answer 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);
});

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

1 个答案: