将用户输入限制为固定的宽度和高度可编辑的div
将用户输入限制为固定的宽度和高度可编辑的div
提问于 2016-03-10 00:55:16
经过大量的研究，我还没有发现有完全相同要求的帖子，所以我想写一篇新的帖子。
我正在尝试创建一个固定区域(例如，200px x 300px)，用户可以在其中输入文本输入。他应该能够输入任何字符(包括换行符)。
然而，他不应该能够“在框外书写”(例如，对于200x300的区域，不应该有溢出滚动或隐藏)。
一旦用户到达区域的“底部”，他们就不能再输入任何换行符。
一旦他们到达200x300区域的“右下角”，他们应该不能再输入任何字符。
这在css，angular，js，jquery等中是可能的吗？
回答 3
Stack Overflow用户
发布于 2016-03-10 01:10:46
在字体中使用base和div的大小来限制字符的长度，但是您必须更改字体大小和系列或行高，因为每个浏览器可以有不同的样式。
要限制div中的字符长度，需要忽略内容中的HTML标记，比如解释。
首先计算有多少个字符适合那里。
Stack Overflow用户
发布于 2016-03-10 01:20:30
您可以使用cols="“属性限制每行的字符数，并使用rows="”属性设置显示的可编辑行数。然而，限制行数只能使用maxlength属性，该属性将控制您可以拥有的字符数，这是您必须估计的。有一些hacks to limit the number of rows with event listeners，但它们似乎有相当大的bug。
Stack Overflow用户
发布于 2016-03-10 03:20:50
这是可能的，您只需要做以下操作：
- 使用事件处理程序来控制字符输入过程。当达到限制时，需要能够停止处理进一步的击键。使用
keypress和keydown，首先处理字符处理，当用户按下一个键时，使用第二个控制键，使用单独的缓冲区产生最终结果，计算它的边界矩形，如果它大于限制，则可以用行数乘以行高来计算文本正文的防止事件properties). - Width (使用HTML5
canvasmeasureText方法可以相当简单地计算文本正文的解释font-size和line-heightCSS handling. - Height。
- 如果你没有canvas，您可以使用屏幕外的
span(或任何其他inline)元素-只需使用文本块填充innerHTML并使用其offsetWidth属性。实际上，如果您用<br>替换换行符，您可以使用span方法一次性获得两个维度-只要确保它具有与可编辑容器相同的样式。
据我所知，HTML已经以ContentEditable格式存储了正文(换句话说，用<br>代替了换行符)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35897782
复制相关文章
相似问题
腾讯云开发者
