Question

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

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

Answer 1

。 @ jes5199我将来会写信给您。我比您大约领先11年，并且我得到了消息。也许我得到的最好的消息直接与您的问题有关：完全有可能在文本区域中计算cols。第二条新闻是，我可以使用一些方便的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 />元素的宽度内可以容纳多少个字符。

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

仅当样式为<textarea />的字体是统一的（如等宽字体）时，此计算才有效。如果字符的宽度不同，则需要使用一些其他代码来解决。
在我创建的简单React App中，您将看到setTextAreaCols钩子仅在重新渲染时以及用户向<textarea />中输入新信息时调用，而在元素为调整大小。

Answer 2

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

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

有关Textarea w3cschools的更多信息。

Javascript：计算动态大小的textarea的列数

2 个答案: