点击td显示contenteditable div时如何实现单次点击即可聚焦输入

根因说明 #

当前需要点击两次才能定位光标的核心原因有两个：

• 仅对div设置了显示和可编辑属性，没有主动触发聚焦动作，浏览器默认不会将焦点自动切换到新显示的元素上
• td元素的mousedown事件默认行为会将焦点锁定在td上，会覆盖后续给div设置的聚焦状态

修改后代码 #

$(document).ready(function() {
    $("td").on("mousedown", function(e) {
        // 阻止td点击默认行为，避免焦点被td抢占
        e.preventDefault();
        var cellOffset = $(this).offset();
        $('#cellSelect')
            .offset({ top:cellOffset.top-1, left:cellOffset.left-1 })
            .show(0)
            .attr('contenteditable','true')
            // 主动触发可编辑div的聚焦，自动定位光标
            .focus();
    });
});

兼容优化（可选） #

如果在部分浏览器中遇到空的可编辑div聚焦后光标不显示的问题，可以在focus()调用后补充以下代码手动设置光标位置：

const editableEl = $('#cellSelect')[0];
const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(editableEl);
// 光标定位到内容起始位置，设置为false则定位到末尾
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);

内容的提问来源于stack exchange，提问作者Daniel Williams