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

前端之家收集整理的这篇文章主要介绍了javascript – 如何限制在html表中使用的contenteditable中的字符输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

Limiting Number of Characters in a ContentEditable div

最佳答案
你可以用keypress()事件处理程序做一些棘手的事情.如果内容大于您的限制,则通过返回false来阻止keypress事件

更新:添加侦听器以粘贴事件.然后检查内容长度.还要阻止拖动选项以防止内容拖动到它.

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

猜你在找的HTML相关文章