Question

我希望设置一个textarea，然后人们可以选择一些字体，例如“sans-serif”和“serif”来在文本中输入textarea。我将设置按钮“sans-serif”和“serif”按钮，如果用户单击它，textarea的字体将更改为相关字体。

但这里有一些条件：

textarea的最大总行数限制是4。



每行的最大像素不能超过100px，100px表示用户输入的字符，而不是textarea宽度。



如果用户输入超过100px字符的行，它将自动转到下一行。



当用户到达第5行时，它将不允许用户输入更多内容。

我认为应该使用带有javascript / jquery的html 5 canvas。但是因为我有一个功能是改变textarea的字体。所以你有什么想法吗？

以下是html和css设置：

HTML：

<textarea id="testarea"></textarea>
<br>
<div class="btn" onclick="$('#testarea').css('font-family', 'sans-serif');">Sans-serif</div>
<div class="btn" onclick="$('#testarea').css('font-family', 'serif');">Serif</div>

CSS：

#testarea{
  resize: none;
  width: 300px;
  height: 232px;
  font-size: 16px;
  line-height: 1.45;
}
.btn{
  cursor: pointer;
  display: inline-block;
  background: green;
  padding: 10px;
}

Answer 1

所以我想出了一个解决方案。作出假设。阅读完整的答案。

textarea的最大总行数限制为4 - 包含

每行的最大像素不能超过100px，100px表示   用户输入的字符，而不是textarea宽度。 - 包含

如果用户输入超过100px字符的行，则会   自动转到下一行。 - 包含

当用户到达第5行时，它将不允许用户输入   更多。 - 包含

已添加。

JS - 不超过4行（最多4个）

因此，font-size textarea中的16px已100/16 = 6.25   6。我采取的每行最大字符数是   var textarea = document.getElementById("testarea"); textarea.onkeyup = function() { var lines = textarea.value.split("\n"); for (var i = 0; i < lines.length; i++) { if (lines[i].length <= 6) continue; var j = 0; space = 6; while (j++ <= 6) { if (lines[i].charAt(j) === " ") space = j; } lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || ""); lines[i] = lines[i].substring(0, space); } textarea.value = lines.slice(0, 4).join("\n"); };

超过6个字符将转到下一行

不能输入超过4行

<强>答案：

＆＃13;

#testarea {
  resize: none;
  width: 300px;
  height: 232px;
  font-size: 16px;
  line-height: 1.45;
}

.btn {
  cursor: pointer;
  display: inline-block;
  background: green;
  padding: 10px;
}

＆＃13;

<textarea id="testarea"></textarea>
<br>
<div>
  <button class="btn" type="button" onclick="myFunction()">Comic Sans</button>
</div>

<div>
  <button class="btn" type="button" onclick="myFunction_2()">Reset</button>
</div>

<script>
  function myFunction() {
    document.getElementById("testarea").style.font = "italic bold 25px Comic Sans MS, Comic Sans MS, Comic Sans, cursive";
  }
</script>

<script>
  function myFunction_2() {
    document.getElementById("testarea").style.font = "italic normal 16px Arial, Helvetica, sans-serif";
  }
</script>

＆＃13;

Enter

＆＃13;

输出样本

（可以输入到下一行或按textarea然后转到下一行）

<强>结论：

根据您的要求进行更改。

注意：

代码质量不高，相应更改。

这是假设的 font-size将有一个固定的TileNavItem

单击按钮时更改字体将不会调整为上述要求。

度过美好的一天。

如何限制像素中每行的textarea长度和行数？

1 个答案: