JavaScript实现HTML数字多行文本框自动换行与格式化

在Web开发中，多行文本框(Textarea)的自动换行和格式化是提升用户体验的重要功能。本文将详细介绍如何使用JavaScript实现这些功能。

1. 基本HTML多行文本框

<textarea id="numberText" rows="5" cols="50"></textarea>

2. 实现自动换行功能

JavaScript可以通过CSS的white-space属性控制换行：

document.getElementById('numberText').style.whiteSpace = 'pre-wrap';

或者使用更全面的CSS方案：

#numberText {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

3. 数字格式化实现

对于数字内容的格式化，可以使用以下JavaScript函数：

function formatNumberText(textarea) {
  let value = textarea.value;
  // 去除非数字字符
  value = value.replace(/[^0-9\n]/g, '');
  // 每4位数字后添加换行
  value = value.replace(/([0-9]{4})/g, '$1\n');
  textarea.value = value.trim();
}

// 绑定事件
document.getElementById('numberText').addEventListener('input', function() {
  formatNumberText(this);
});

4. 高级格式化选项

更复杂的格式化需求可以结合正则表达式：

function advancedFormat(textarea) {
  let lines = textarea.value.split('\n');
  let formattedLines = lines.map(line => {
    // 对每行进行特定格式化
    return line.replace(/(\d{4})(\d{4})(\d{4})/, '$1 $2 $3');
  });
  textarea.value = formattedLines.join('\n');
}

5. 性能优化建议

• 使用debounce技术减少频繁触发
• 对于大量数据考虑虚拟滚动技术
• 在失去焦点时进行格式化而非实时处理

6. 兼容性考虑

确保代码在主流浏览器中都能正常工作，必要时添加polyfill。