Question

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

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

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

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

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

Limiting Number of Characters in a ContentEditable div

Answer 1

您可以使用 keypress() 事件处理程序执行一些棘手的操作。如果内容超过您的限制，请通过返回keypress

来阻止false事件

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

添加溢出策略，例如：

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

如果您知道如何使用CSS类，请使用它。

Answer 3

我使用jQuery绑定函数，只要div发生以下任何事件，就会调用函数'editableContentChanged''blur keyup paste copy cut mouseup'。如果需要，您可以查看文档并将事件添加到绑定功能。 editableContentChanged函数首先替换可编辑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表格中使用的contenteditable中的字符输入

3 个答案: