html 行号编辑框,显示行号的文本框效果，兼容ie、火狐等浏览器

您可以使用以下代码实现一个带行号的文本框效果：

HTML 代码：

<div class="code-container">
  <div class="line-numbers"></div>
  <textarea class="code-input"></textarea>
</div>

CSS 代码：

.code-container {
  position: relative;
}

.line-numbers {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-y: scroll;
}

.code-input {
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #ddd;
  margin-left: 30px;
  width: 100%;
  height: 300px;
}

JavaScript 代码：

const codeInput = document.querySelector('.code-input');
const lineNumbers = document.querySelector('.line-numbers');

codeInput.addEventListener('input', function() {
  updateLineNumbers();
});

function updateLineNumbers() {
  const lines = codeInput.value.split('\n');
  lineNumbers.innerHTML = lines
    .map((line, index) => {
      return `<div>${index + 1}</div>`;
    })
    .join('');
}

这段代码会在文本框左侧显示一个行号编辑框，通过 JavaScript 代码实现对文本框输入内容的监听，当文本框内容发生变化时，会自动更新行号编辑框的内容。