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

Question

我目前在我的网页中使用html表允许用户输入某些细节.但是,由于字符输入没有限制,当用户输入任意数量的字符时,表格可以大幅拉伸.

我想知道如何限制这种限制,以防止这种情况发生？

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

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

我在下面发现了这个链接类似的问题,不过是jQuery和业余开发人员的新手,我很难理解给出的答案以及如何使用它们.

限制ContentEditable div中的字符数

Answer 1

您可以使用keypress()事件处理程序做一些棘手的事情。keypress如果内容大于您的限制，则通过返回来防止发生事件false

更新：向事件添加侦听器paste。然后检查内容长度。还可以防止拖动选项以防止内容拖动到其中。

var limit = 10;
$('div[contenteditable]').keypress(function() {
  return this.innerHTML.length < limit;
}).on({
  'paste': function(e) {
    var len = this.innerHTML.length,
      cp = e.originalEvent.clipboardData.getData('text');
    if (len < limit)
      this.innerHTML += cp.substring(0, limit - len);
    return false;
  },
  'drop': function(e) {
    e.preventDefault();
    e.stopPropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
  <td>One Off Capital</td>
  <td>
    <div contenteditable></div>
  </td>
  <td>
    <div contenteditable></div>
  </td>
</tr>