如何为textarea中用户输入时跟随文本的光标行设置单独颜色

解决方案 #

你可以通过给目标行单独绑定样式的方式实现颜色区分，以下是几种常用实现方案：

• 方案1：给目标行元素添加自定义类，单独配置样式
  首先给你需要修改的行对应的DOM元素添加自定义类：

  <!-- 示例：给目标行加名为special-line的自定义类 -->
  <div class="special-line">你截图中圈出的行内容</div>
  

  之后在CSS里配置对应样式即可，色值可以按你的需求修改：

  /* 单独设置目标行的颜色，这里示例用红色 */
  .special-line {
    color: #f5222d;
  }
  /* 保留textarea原有的文本颜色设置即可 */
  textarea {
    color: #333333;
  }
  

• 方案2：用选择器直接定位目标行
  如果不方便给目标行加自定义类，也可以通过层级选择器定位：

  /* 示例：假设目标行是类为content的容器下的第3个直接子元素 */
  .content > :nth-child(3) {
    color: #f5222d;
  }
  

• 方案3：动态渲染场景下用JS设置内联样式
  如果行内容是JS动态生成的，可以在渲染时直接设置样式：

  const targetRow = document.querySelector('你目标行的选择器')
  targetRow.style.color = '#f5222d'
  

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