如何在JavaScript中获取textarea内字符的CSS像素宽度？

问题核心 #

需要实现一个JavaScript函数，接收字符后返回其在HTML textarea中的CSS px宽度，需支持控制字符（如\u0001、\u0096、\uFFFD等），最好能结合字符索引处理制表符。现有基于canvas的实现在Chromium中正常，但Firefox中失效——Firefox会将textarea内的控制字符渲染为十六进制框，与canvas的渲染表现不一致，导致宽度计算错误。

现有代码的问题 #

原代码通过canvasContext.measureText()测量宽度，但Firefox中canvas对控制字符的渲染逻辑和textarea不同：canvas可能不渲染部分控制字符，或渲染尺寸与textarea的十六进制框不符，导致宽度偏差。

解决方案：用隐藏textarea模拟测量 #

直接使用与目标textarea样式完全一致的隐藏textarea来测量字符宽度，因为它的渲染逻辑和目标textarea完全相同，包括控制字符的十六进制框显示。

改进后的函数实现 #

class CharacterWidthCalculator {
  constructor(targetTextarea) {
    this.targetTextarea = targetTextarea;
    this.cachedWidths = new Map();
    // 创建隐藏的测量用textarea
    this.measureTextarea = this.createMeasureTextarea();
    document.body.appendChild(this.measureTextarea);
    // 预计算空格宽度，用于制表符处理
    this.spaceWidth = this.getCharacterWidth(' ');
    // 制表符宽度（可配置，比如4个空格）
    this.tabWidth = 4;
  }

  createMeasureTextarea() {
    const textarea = document.createElement('textarea');
    // 复制目标textarea的关键样式，确保渲染一致
    const computedStyle = window.getComputedStyle(this.targetTextarea);
    Object.assign(textarea.style, {
      position: 'absolute',
      top: '-9999px',
      left: '-9999px',
      width: 'auto',
      height: 'auto',
      padding: computedStyle.padding,
      border: computedStyle.border,
      font: computedStyle.font,
      lineHeight: computedStyle.lineHeight,
      whiteSpace: 'nowrap', // 禁止换行，确保字符宽度准确
      overflow: 'hidden',
      boxSizing: computedStyle.boxSizing
    });
    return textarea;
  }

  getCharacterWidth(char, index = 0) {
    // 处理零宽字符
    if (/[\u00AD\u02de\u0300-\u036F\u0483-\u0489\u200b]/.test(char)) {
      return 0;
    }

    // 处理制表符：根据索引计算制表位宽度
    if (char === '\t') {
      const currentColumn = index % this.tabWidth;
      return (this.tabWidth - currentColumn) * this.spaceWidth;
    }

    // 从缓存读取
    if (this.cachedWidths.has(char)) {
      return this.cachedWidths.get(char);
    }

    let width;

    // 处理控制字符（ASCII控制区及DEL）
    if (char !== '\u0096' && /[\u0000-\u001F\u007F-\u009F]/.test(char)) {
      // 用\u0096作为基准，因为Firefox中所有控制字符的十六进制框宽度一致
      width = this.getCharacterWidth('\u0096');
      this.cachedWidths.set(char, width);
      return width;
    }

    // 测量普通字符和已处理的控制字符
    this.measureTextarea.value = char;
    // scrollWidth是内容的实际宽度，排除padding和border
    width = this.measureTextarea.scrollWidth;
    // 调整box-sizing的影响：如果是border-box，需要减去padding和border的水平值
    if (window.getComputedStyle(this.measureTextarea).boxSizing === 'border-box') {
      const paddingLeft = parseFloat(window.getComputedStyle(this.measureTextarea).paddingLeft);
      const paddingRight = parseFloat(window.getComputedStyle(this.measureTextarea).paddingRight);
      const borderLeft = parseFloat(window.getComputedStyle(this.measureTextarea).borderLeftWidth);
      const borderRight = parseFloat(window.getComputedStyle(this.measureTextarea).borderRightWidth);
      width -= paddingLeft + paddingRight + borderLeft + borderRight;
    }

    this.cachedWidths.set(char, width);
    return width;
  }

  // 清理DOM元素
  destroy() {
    document.body.removeChild(this.measureTextarea);
  }
}

关键说明 #

1. 样式一致性：隐藏textarea完全复制目标textarea的样式，确保测量宽度与实际渲染一致，这是解决Firefox兼容性的核心。
2. 控制字符处理：Firefox中所有控制字符的十六进制框宽度相同，因此统一用\u0096作为基准测量，避免重复计算。
3. 制表符支持：通过字符索引计算当前列位置，返回对应制表位的宽度（默认4个空格宽度，可通过tabWidth配置）。
4. 缓存机制：用Map缓存已测量的字符宽度，提升性能。
5. 零宽字符直接返回0：覆盖常见的零宽连字符、组合标记等。

使用示例 #

const targetTextarea = document.getElementById('your-textarea');
const widthCalculator = new CharacterWidthCalculator(targetTextarea);

// 获取普通字符宽度
console.log(widthCalculator.getCharacterWidth('a'));
// 获取控制字符宽度
console.log(widthCalculator.getCharacterWidth('\u0001'));
// 获取制表符宽度（结合索引）
console.log(widthCalculator.getCharacterWidth('\t', 5)); // 5%4=1，返回3个空格宽度

// 用完后清理
// widthCalculator.destroy();

优势 #

• 完全兼容Firefox：直接模拟textarea的渲染逻辑，控制字符的宽度测量准确。
• 精度更高：避免canvas与textarea的渲染差异。
• 可扩展：支持制表符的位置相关计算，可调整制表位宽度。

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