时间戳

首页 > 解决方案 > 使用 taggle.js 限制 contenteditable div 的行数

javascript - 使用 taggle.js 限制 contenteditable div 的行数

问题描述

我正在尝试创建 div，它看起来像多行输入，并且能够使用 taggle.js 库插入标签。现在我正在努力限制标签的最大行数（不是字符）。

<div id="divinput" tabIndex="1" class="custom mcustom textarea" contentEditable>
</div>

非常简单的演示如下所示： https ://jsfiddle.net/t9sabcy3/1/

请原谅我将 taggle.css 放入脚本下方的 css 部分（我用长 /* -------------------- */ 注释分隔它们），不能附加到头这个文件。我准备演示在完成第一行后停止。

问题显示在 3 个案例中。

第一个只是一直写并接受标签->虽然它应该在第一行停止，但下一行出现了。

第 2 种和第 3 种情况相连，如果最后一个标签很长（第二种情况小于 #divinput 的宽度，第 3 种更大），标签出现在第 2 行（第 3 种情况甚至第 3 行出现）。

我无法使用输入（因为标签在那里不起作用）并且我尝试了一些选项，例如 preventDefault（如在演示中），设置为 nowrap（不起作用），触发退格键按下事件（keydown 没有'根本听不懂），现在我的想法已经不多了。任何帮助表示赞赏

标签： javascripthtmlcssjquery-uitags

解决方案

推荐阅读