行号textarea实现方法大全

2023-11-09 05:30:56

作为技术博客撰稿人，我将深入探讨如何实现一个内容自带行号的 textarea。本文将介绍多种方法，并对每种方法的优缺点进行分析，以便读者根据自身需求选择最合适的方法。

方法一：textarea 加样式

实现步骤

首先，在 HTML 代码中添加一个 textarea 元素：

<textarea id="my-textarea"></textarea>

然后，在 CSS 代码中添加以下样式：

#my-textarea {
  counter-reset: linenumber; /* 重置行号计数器 */
  position: relative; /* 设置定位，以便在 textarea 中添加行号 */
}

#my-textarea::before {
  content: counter(linenumber); /* 显示行号 */
  counter-increment: linenumber; /* 增加行号计数器 */
  position: absolute; /* 设置绝对定位，以便行号位于 textarea 的左侧 */
  left: 0; /* 设置行号距离 textarea 左侧的距离 */
  top: 0; /* 设置行号距离 textarea 顶部的距离 */
  padding-right: 5px; /* 设置行号右侧的间距 */
  text-align: right; /* 设置行号文本的对齐方式为右对齐 */
  color: #ccc; /* 设置行号文本的颜色 */
  font-family: monospace; /* 设置行号文本的字体为等宽字体 */
}

优点

实现简单，仅需添加 CSS 样式即可。
兼容性好，支持所有主流浏览器。

缺点

不能对齐多行文本，每行文本的起始位置不同。
不能对齐不同长度的文本，导致行号错位。

方法二：使用多个 input 框模拟

实现步骤

首先，在 HTML 代码中添加一个 div 元素，该 div 元素将包含所有 input 框：

<div id="my-textarea">
  <input type="text" id="line-1" />
  <input type="text" id="line-2" />
  <input type="text" id="line-3" />
  <!-- ... -->
</div>

然后，在 JavaScript 代码中添加以下脚本：

// 获取 div 元素
const textarea = document.getElementById("my-textarea");

// 创建一个数组来存储所有 input 框
const lines = [];

// 循环创建 input 框
for (let i = 1; i <= 10; i++) {
  const input = document.createElement("input");
  input.type = "text";
  input.id = `line-${i}`;
  lines.push(input);
  textarea.appendChild(input);
}

// 为每个 input 框添加事件监听器
lines.forEach((line) => {
  line.addEventListener("input", () => {
    // 更新行号
    updateLineNumber();
  });
});

// 更新行号
function updateLineNumber() {
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];
    line.placeholder = `${i + 1}`;
  }
}