将用户输入限制为固定宽度和高度contenteditable div

Question

经过大量的研究，我找不到具有完全相同要求的帖子，所以我想写一篇新帖子。

我试图创建一个固定区域（例如200px×300px），用户可以在其中输入文本输入。他应该能够输入任何角色（包括换行符）。

然而，他不应该在盒子外写字。 （即不应该溢出滚动或隐藏200x300区域）。

一旦用户到达底部＆＃39;该地区，他们不能再进入换行符。

一旦他们到达右下方＆＃39;在200x300区域的一角，它们根本不能再输入任何字符。

这在css，angular，js，jquery等中是否可行？

Answer 1

使用字体和div的大小限制字符长度，但必须更改字体大小和族或行高，因为每个浏览器都可以有不同的样式。

要限制div中字符的长度，需要忽略内容中的HTML标记，例如解释。

首先计算那里有多少个字符。

Answer 2

您可以使用cols =＆＃34;＆＃34;来限制每行的字符数。属性并使用rows =＆＃34;＆＃34;设置显示的可编辑行数。属性。但是，限制行数只能是一个maxlength属性，它可以控制你可以拥有的字符数，这是你必须估计的。有一些hacks to limit the number of rows with event listeners，但它们似乎有相当大的错误。

Answer 3

有可能，您只需要执行以下操作：

• 使用事件处理程序来控制字符输入过程。当达到限制时，需要能够停止处理进一步的击键。使用keypress和keydown，首先处理字符处理，然后使用第二控制键处理。
• 每次用户按键时，使用单独的缓冲区产生最终结果，计算其边界矩形，如果大于限制，则阻止事件处理。
• 文本正文的高度可以通过将行数乘以行高来计算（解释font-size和line-height CSS属性）。
• 借助HTML5 canvas measureText方法，可以轻松计算文本正文的宽度。
• 如果您没有画布，可以使用屏幕外span（或任何其他inline）元素 - 只需使用文本块填充innerHTML并使用其offsetWidth属性。实际上，如果您使用<br>替换换行符，则可以使用span方法一次性获取两个维度 - 只需确保它与可编辑容器具有相同的样式。

我记得，ContentEditable容器已经以HTML格式存储文本正文（换句话说 - 使用<br>而不是换行符。）