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

Question

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

如何计算文本区域中的文本列数？

Answer 1

。 @jes5199 我从未来写信给你。我比你早了大约 11 年，我带来了新闻。也许我得到的最好的消息与您的问题直接相关：完全可以计算文本区域中的列数。第二条消息是，我可以使用一些方便的 Web 原型设计工具快速演示如何计算 <textarea /> 的列。我可以分享的最后一条消息是，您绝对应该毫无疑问地投资 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: 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 挂钩仅在重新渲染时调用，并且当用户将新信息输入到 <textarea /> 时调用，但不一定在调整元素大小时调用。李>

Answer 2

DOM textarea 对象支持cols 方法，可用于获取或设置textarea 的列数。

var numCols = document.getElementById('myTextArea').cols

有关 Textarea 的更多信息，请访问w3cschools。