如何让textarea的换行符可被选中？

方案：用contenteditable元素模拟textarea #

原生<textarea>的换行选中行为受浏览器默认限制，难以直接修改，改用contenteditable的div来模拟，能更好控制选中样式和换行行为，匹配你需要的效果。

1. 基础组件实现 #

创建一个React组件，使用div并设置contenteditable属性，同时添加必要的样式：

import { useState } from 'react';

const SelectableLineBreakTextarea = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.currentTarget.textContent);
  };

  return (
    <div
      contentEditable
      suppressContentEditableWarning={true}
      onInput={handleChange}
      style={{
        minHeight: '150px',
        width: '100%',
        padding: '8px',
        border: '1px solid #ccc',
        borderRadius: '4px',
        fontFamily: 'monospace',
        whiteSpace: 'pre-wrap',
        lineHeight: '1.5',
        outline: 'none',
        resize: 'vertical',
      }}
    >
      {value}
    </div>
  );
};

export default SelectableLineBreakTextarea;

2. 关键样式说明 #

• whiteSpace: 'pre-wrap'：保留换行符，同时允许内容超出宽度时自动换行，确保换行符被视为可选中的独立内容。
• lineHeight: '1.5'：设置行高，让换行后的空白区域更明显，选中时能清晰看到高亮效果。
• resize: 'vertical'：添加原生textarea的垂直拉伸功能，保持使用习惯一致。

3. 额外优化（可选） #

如果需要和原生textarea的行为更匹配，可以添加以下处理：

• 支持placeholder：

// 组件内添加placeholder状态
const [placeholder] = useState('请输入内容...');

// 修改渲染的div
<div
  // ...其他属性
  data-placeholder={placeholder}
  className="custom-textarea"
>
  {value || null}
</div>

对应的全局CSS：

.custom-textarea:empty:before {
  content: attr(data-placeholder);
  color: #999;
}

• 过滤富文本粘贴：避免用户粘贴带格式的内容，只保留纯文本：

const handlePaste = (e) => {
  e.preventDefault();
  const plainText = e.clipboardData.getData('text/plain');
  document.execCommand('insertText', false, plainText);
};

// 在div上绑定paste事件
<div
  // ...其他属性
  onPaste={handlePaste}
>
  {value}
</div>

效果验证 #

这个自定义文本区域的换行符会被包含在选中范围内，选中跨多行文本时，换行的位置也会显示高亮背景，和你需要的示例效果一致。

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