马黑黑 发表于 2026-5-26 12:35

Textarea回车键的处理

过去手写的基于 textarea 标签的只能回车键处理极为简洁：
// start 和 end 已事先获取
if (e.key === 'Enter') {
    e.preventDefault();
    const tstr = value.substring(0, end);
    const strAr = tstr.split('\n');
    const target = strAr;
    const indent = '\n' + (target.match(/^\s*/) || '');
    ele.setRangeText(indent);
    ele.selectionStart = end + indent.length;
    ele.selectionEnd = end + indent.length;
}
但它忽略了一个问题：当辑框里如果有选中文本。

为了省事，我把上面的代码交给DS，让它帮完善。DS考虑得很周到，它提供的代码可行：
if (e.key === 'Enter') {
    const start = ele.selectionStart;
    const end = ele.selectionEnd;
    const hasSelection = start !== end;
   
    // 如果有选中文本，先删除
    if (hasSelection) {
      ele.setRangeText('', start, end, 'start');
    }
   
    // 获取当前光标位置（删除选中文本后的新位置）
    const currentPos = ele.selectionStart;
    const currentValue = ele.value;
   
    // 获取当前行的缩进
    const textBeforeCursor = currentValue.substring(0, currentPos);
    const lines = textBeforeCursor.split('\n');
    const currentLine = lines;
    const indent = '\n' + (currentLine.match(/^\s*/) || '');
   
    // 插入换行和缩进
    ele.setRangeText(indent, currentPos, currentPos, 'end');
   
    // 设置光标到新位置
    const newPos = currentPos + indent.length;
    ele.selectionStart = newPos;
    ele.selectionEnd = newPos;
}代码量远远超出我的预期。要保持简洁度，还是用回原来的代码，需要改进一下：

// start 和 end 已事先统一获取
if (e.key === 'Enter') {
    e.preventDefault();
    const tstr = value.substring(0, end);
    const strAr = tstr.split('\n');
    const target = strAr;
    const indent = '\n' + (target.match(/^\s*/) || '');
    ele.setRangeText(indent);
    ele.selectionStart = ele.selectionEnd = end + indent.length - (end - start);
}

核心在 09 行：编辑框输入光标的位置指定——拿选中文本的光标结束位置 end 减去起始位置 start，这样能够巧妙处理了选中和没有选中文本的状态（不选中时 end - start = 0，选中时重设的光标位置要减去 end - start 的差即回车删掉的选中文本的长度）。

梦江南 发表于 2026-5-26 19:05

谢谢黑黑老师辛苦，谢谢分享。{:4_187:}

马黑黑 发表于 2026-5-26 19:35

梦江南 发表于 2026-5-26 19:05
谢谢黑黑老师辛苦，谢谢分享。

这个没有一定的H5和JS基础，可能会像看天书

红影 发表于 2026-5-26 23:27

有选中文本时，回车还要能调整光标位置，真够麻烦的。{:4_204:}

马黑黑 发表于 2026-5-26 23:53

红影 发表于 2026-5-26 23:27
有选中文本时，回车还要能调整光标位置，真够麻烦的。

是的，这类处理非常琐碎，需要一一考虑到
页: [1]
查看完整版本: Textarea回车键的处理