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

Question

我目前在我的网页中使用 html table 来允许用户输入某些详细信息。然而，由于对字符输入没有限制，因此当用户输入任意数量的字符时，table 可以大大扩展。

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

下面是我用于 table

的代码片段

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

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

Limiting Number of Characters in a ContentEditable div

Answer 1

您可以使用 keypress() 事件处理程序做一些棘手的事情。通过返回 false

阻止 keypress 内容超过限制的事件

更新： 将侦听器添加到 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>

Answer 2

添加溢出策略，例如：

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

如果你知道如何使用 CSS 类使用它。

Answer 3

我使用了 jQuery 绑定函数，只要 div 发生以下任何事件 'blur keyup paste copy cut mouseup'，它就会调用函数 'editableContentChanged'。如果需要，您可以查看文档并向绑定函数添加事件。 editableContentChanged 函数首先替换 editable div 的内容，然后调用 setCaret 方法将光标放在内容的末尾。这是一个工作示例 https://jsfiddle.net/vacfkono/4/
HTML

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

Javascript/jQuery

  $(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();
}

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

How to limit character input in contenteditable used within a html table

html

javascript

jquery

contenteditable