Javascript 如何限制html表中使用的contenteditable中的字符输入

我目前在我的网页中使用一个html表，允许用户输入某些细节。但是，由于字符输入没有限制，因此当用户输入任意多的字符时，表格可以大大拉伸

我想知道如何限制此内容以防止发生这种情况

下面是我用于该表的代码片段

<tr>
<td>One Off Capital</td>
<td><div contenteditable>  </div></td>
<td><div contenteditable>  </div></td>
</tr>

一次性资本

我在下面找到了一个类似问题的链接，但是作为jQuery的新手和业余开发人员，我很难理解给出的答案以及如何使用它们

---

您可以使用事件处理程序执行一些棘手的操作。返回

false

更新：将侦听器添加到

粘贴事件。然后检查内容长度。还可以使用“防止拖动”选项，以防止将内容拖动到其中


var限值=10；
$（'div[contenteditable]'）。按键（函数（）{
返回this.innerHTML.length

一次性资本
添加溢出策略，类似于：

<div style="width: 300px; overflow: auto;" contenteditable="contenteditable"></div>



如果您知道如何使用CSS类，请使用它。
我使用了jQuery绑定函数，每当div发生以下任何事件时，该函数都会调用函数“editableContentChanged”“blur keyup paste copy cut mouseup”。如果需要，您可以查看文档并向bind函数添加事件。editableContentChanged函数首先替换EditableDiv的内容，然后调用setCaret方法，将光标放在内容的末尾。这是一个有效的例子

HTML

为什么要限制输入？您的存储空间有限吗？还是完全是可视的？如果输入换行到下一行是否正常？您是否考虑过使用
input
或
textara
？仅在页面中可见，表格延伸太远，当一个单元格的字符太多时，无法看到旁边的列移动到下一行。我使用了contenteditable，因为用户必须在表中输入，文本区域不适合。这不是一个完整的解决方案。我仍然可以使用
ctrl+v
（或右键单击+粘贴）添加超过10个字符。如果我从另一个文档拖放文本，我也可以添加更多字符。@Halcyon:好的，我将检查：）如何使此函数在动态创建的元素上正确工作？@sanjitbhardwaj:生成处理程序时需要绑定处理程序，或者需要使用事件委派来侦听动态生成的元素上的EVWnt元素。
<tr>
<td>One Off Capital</td>
<td><div contenteditable>fadsfasd </div></td>
<td><div contenteditable> fasdfasd </div></td>
</tr>

  $(document).ready(function () {
        $('div').bind('blur keyup paste copy cut mouseup', editableContentChanged);
    });

var maxLength = 20;
function editableContentChanged() {
    if($(this).html().length >= maxLength) {
        $(this).html($(this).html().substring(0, maxLength-1));
        setCaret(this);
    }
}

function setCaret(el) {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[0], 19);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}