右键获取textarea光标所在整行的功能在contenteditable可编辑div上失效求助

问题原因 #

• selectionStart/selectionEnd是<input>、<textarea>这类表单控件独有的属性，带contenteditable属性的普通DOM元素不支持这两个属性，你代码里拿到的start和end都是undefined，所以最终截取的字符串为空。

修正后的代码 #

首先需要实现获取可编辑元素内光标相对于纯文本的偏移量的方法，再复用你原有行截取逻辑：

// 通用方法：获取可编辑元素内的选中文本起止偏移
function getEditableOffset(el) {
    const sel = window.getSelection();
    let start = 0, end = 0;
    if (sel.rangeCount) {
        const range = sel.getRangeAt(0);
        const preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(el);
        preCaretRange.setEnd(range.startContainer, range.startOffset);
        start = preCaretRange.toString().length;
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        end = preCaretRange.toString().length;
    }
    return { start, end };
}

$(document).on('contextmenu', '#txstory', function(e){
    e.preventDefault();
    const borderChars = ['\n', '\r', '\t'];
    const tex = $(this).val();
    let start = this.selectionStart;
    let end = this.selectionEnd;
    while (start > 0){
        if(borderChars.indexOf(tex[start]) == -1){--start;}
        else{break;}                        
    }
    while(end < tex.length){
        if(borderChars.indexOf(tex[end]) == -1){++end;}
        else{break;}
    }
    const str = tex.substr(start, end - start).trim();
    console.log(str);
});

$(document).on('contextmenu', '#ed', function(e){
    e.preventDefault();
    const borderChars = ['\n', '\r', '\t'];
    const tex = $(this).text();
    // 调用通用方法获取偏移
    const { start, end } = getEditableOffset(this);
    let s = start, e = end;
    while (s > 0){
        if(borderChars.indexOf(tex[s]) == -1){--s;}
        else{break;}                        
    }
    while(e < tex.length){
        if(borderChars.indexOf(tex[e]) == -1){++e;}
        else{break;}
    }
    const str = tex.substr(s, e - s).trim();
    console.log(str);
});

HTML代码无需修改，和你原有代码一致。

注意事项 #

• 可编辑div里的换行默认对应<br>标签，用.text()获取的内容会自动转换为\n，和你原来的边界判断逻辑兼容。
• 如果可编辑div内部有子元素（比如<p>、<span>等带样式的标签），上面的偏移计算方法依然有效，不需要额外调整。

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