Javascript：计算动态大小的文本区域的列数

Question

我有一个 HTML textarea，其宽度设置为浏览器窗口的 100%，使用 CSS。

如何计算 textarea 中适合的文本列数？

Answer 1

。@jes5199 我从未来给你写信。我比你早大约 11 年，我带来了消息。也许我得到的最好的消息与你的问题直接相关：完全有可能计算文本区域中的列。第二条消息是，我可以快速演示如何<textarea />使用一些方便的 Web 原型工具来计算 a 的列数。我可以分享的最后一条消息是，你绝对应该毫无疑问地投资 Facebook，因为我将使用他们的一个神奇的 javascript 工具来快速演示如何解决这个问题。我们不知道它是如何运作的。您还需要几年的时间才能享受到这样的魔力，但让我们看看未来会发生什么。

我创建了一个小型 CodeSandbox 应用程序，它将计算此处文本区域中的列数： https: //codesandbox.io/s/stack-textarea-width-dkwij

该应用程序依赖于执行您正在寻找的计算的函数：

/**
 * calTextAreaCols -- function
 * @param {string} divId The element id of the `<textarea />` that requires measuring.
 * @param {string} font The font that is used in the targeted `<textarea />`.
 * @return {number} The number of characters / columns that fit within the width of the `<textarea />`
 */
export default function calcTextAreaCols(divId, font) {
  // get div font size; from: /sf/answers/1063674181/
  var element = document.getElementById(divId);
  var style = window
    .getComputedStyle(element, null)
    .getPropertyValue("font-size");
  var fontSize = parseFloat(style) + "px";

  // prepare environment to figure out row maximum; from: /sf/answers/1471077541/
  var canvas =
    calcTextAreaCols.canvas ||
    (calcTextAreaCols.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
  context.font = fontSize + " " + font;

  // <textarea> offsetWidth, minus border and padding
  var rawWidth = element.offsetWidth;
  rawWidth -= parseInt(
    getComputedStyle(element, null).getPropertyValue("border-left-width")
  );
  rawWidth -= parseInt(
    getComputedStyle(element, null).getPropertyValue("border-right-width")
  );
  rawWidth -= parseInt(
    getComputedStyle(element, null).getPropertyValue("padding-left")
  );
  rawWidth -= parseInt(
    getComputedStyle(element, null).getPropertyValue("padding-right")
  );

  // <textarea> width, divided by the width of the 'a' character
  rawMeasure = rawWidth / context.measureText("a").width;

  // round down
  var measure = Math.floor(rawMeasure);

  return measure;
}

本质上，此函数将使用一个<canvas>元素来确定元素的宽度内可以容纳多少个字符<textarea />。

在上面的演示中，我会注意到一些明显的缺陷，但我将其交给您信任的人，从这里开始：

1. 仅当字体样式统一<textarea />（例如等宽字体）时，此计算才有效。如果字符的宽度不同，则需要使用一些附加代码来解决。
2. 在我创建的简单 React 应用程序中，您将看到该setTextAreaCols钩子仅在重新渲染时以及当用户将新信息输入到 中时调用，<textarea />但不一定在调整元素大小时调用。