如何使用 jquery 来防止可编辑的 div 超出我们的限制长度

Question

假设我有以下代码：

<div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div>

在这种情况下，我想限制我的用户，例如只能放200个字符（包括空格），我该如何限制呢？我知道我可以使用 jquery 来实现它，但是网络上的大多数示例在单击按钮时会检查它，并且当我以 this StackOverflow question 为基础重新设计我的代码时，它会在单击 div 时检查它，但记住这一点你可以'当类型超过 200 个单词时提醒用户。

那么我怎样才能不断检查用户在 contenteditable div 中输入的字词，并在达到限制时提醒他们？

Answer 1

contenteditable支持输入事件，如果文本太多就停止事件，如下所示：

var el = document.getElementById('editing');
var max = 20;
el.addEventListener('input', function(e) {
  if (el.innerHTML.length > max) {
    el.innerHTML = el.innerHTML.substr(0, max); // just in case
    alert('Not allowed more than ' + max + ' characters');
  }
});

<div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div>

但是，请远离 contenteditable 事件。他们很糟糕

Answer 2

这是简单的纯 js 解决方案：如果有什么请评论我会更新我的答案.. :D

function check()
{
 // get the HTML value.
  var content = document.getElementById('editing').innerHTML;
  //Edit : replace spaces from content (ideally you have to figure out how to remove the posible html tags that user might enter)
  content = content.replace(/ /g," ");
  console.log(content);
 // validate value againts limit say 10 or any constant value.
 if(content.length > 20)
  {
    // alert user.
    alert('limit reached');
    // flush extra characters from end.
    document.getElementById('editing').innerHTML = content.slice(0,content.length-1);
    return;
  }
}


//Edit : if you want remove placeholder from annoying user you can flush it when user gets the focus on it say 

function checkPlaceholder()
{
  document.getElementById('editing').innerHTML = ""; 
}

<div id="editing" contenteditable onInput="check();" onfocus="checkPlaceholder();">Put text here...</div>

Answer 3

<div id="editing" contenteditable onkeypress = "if($(this).text().length >= 200) {return false; }"onclick="alert(document.execCommand('selectAll',false,null)">Put text here...</div>

你return falseonkeypress当字符数大于等于200时

Answer 4

// Detect when you add a character to the div.
$('div#editing').on('keydown',function(e) {
    // Check if you already have 200 characters (but allow 'backspace' and 'del' keys).
    if (e.keyCode != 8 && e.keyCode != 46 && $(this).text().length >= 200) {
        alert('The field is limited to 200 characters');
        return false; // This will make the new character to be ignored.
    }
});