Textarea回车键的处理

马黑黑

过去手写的基于 textarea 标签的只能回车键处理极为简洁：

1. // start 和 end 已事先获取
   
2. if (e.key === 'Enter') {
   
3.     e.preventDefault();
   
4.     const tstr = value.substring(0, end);
   
5.     const strAr = tstr.split('\n');
   
6.     const target = strAr[strAr.length - 1];
   
7.     const indent = '\n' + (target.match(/^\s*/)[0] || '');
   
8.     ele.setRangeText(indent);
   
9.     ele.selectionStart = end + indent.length;
   
10.     ele.selectionEnd = end + indent.length;
    
11. }

复制代码

但它忽略了一个问题：当辑框里如果有选中文本。

为了省事，我把上面的代码交给DS，让它帮完善。DS考虑得很周到，它提供的代码可行：

1. if (e.key === 'Enter') {
   
2.     const start = ele.selectionStart;
   
3.     const end = ele.selectionEnd;
   
4.     const hasSelection = start !== end;
   
5.    
   
6.     // 如果有选中文本，先删除
   
7.     if (hasSelection) {
   
8.         ele.setRangeText('', start, end, 'start');
   
9.     }
   
10.    
    
11.     // 获取当前光标位置（删除选中文本后的新位置）
    
12.     const currentPos = ele.selectionStart;
    
13.     const currentValue = ele.value;
    
14.    
    
15.     // 获取当前行的缩进
    
16.     const textBeforeCursor = currentValue.substring(0, currentPos);
    
17.     const lines = textBeforeCursor.split('\n');
    
18.     const currentLine = lines[lines.length - 1];
    
19.     const indent = '\n' + (currentLine.match(/^\s*/)[0] || '');
    
20.    
    
21.     // 插入换行和缩进
    
22.     ele.setRangeText(indent, currentPos, currentPos, 'end');
    
23.    
    
24.     // 设置光标到新位置
    
25.     const newPos = currentPos + indent.length;
    
26.     ele.selectionStart = newPos;
    
27.     ele.selectionEnd = newPos;
    
28. }

复制代码

代码量远远超出我的预期。要保持简洁度，还是用回原来的代码，需要改进一下：

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

复制代码

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