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

Question

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

我如何计算文本区域内有多少列文本？

Answer 1

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

我创建了一个小型 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: https://stackoverflow.com/a/15195345
  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: https://stackoverflow.com/a/21015393
  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钩子(Hook)仅在重新呈现时以及用户将新信息输入到 <textarea /> 时调用但不一定在调整元素大小时。