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

【问题标题】：Restrict user input to fixed width and height contenteditable div将用户输入限制为固定宽度和高度 contenteditable div
【发布时间】：2016-03-09 16:55:15
【问题描述】：

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

我正在尝试创建一个固定区域（例如 200 像素 x 300 像素），用户可以在其中输入文本。他应该能够输入任何字符（包括换行符）。

但是，他不应该能够“在框外书写”（即 200x300 区域不应该有溢出滚动或隐藏）。

一旦用户到达该区域的“底部”，他们就不能再输入任何换行符。

一旦他们到达 200x300 区域的“右下角”，他们就根本无法再输入任何字符。

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

【问题讨论】：

似乎可以这样做，但您可能需要重新考虑您的要求。本质上，您需要知道输入文本的尺寸，但如果用户更改页面缩放，这可能会变得任意。
@DaneMacaulay，文字和图形缩放应该是统一的，不是吗？
对不起，你是对的@VallyN！

标签： javascript jquery css angularjs contenteditable

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：