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

Question

假设我有以下代码：

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

这种情况下，我想限制我的用户，比如里面只能放200个字符（包括space），请问如何限制呢？我知道我可以用 jquery 来实现它，但是网络上的大多数示例在他们单击按钮时会检查它，并且当我以 this Whosebug question 作为基础重新设计我的代码时，它会在 div 时检查它已单击，但考虑到这一点，您无法在键入超过 200 个单词时提醒用户。

那么我如何才能持续检查用户在内容可编辑中输入的单词 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>

但是，请远离令人满意的活动。他们很糟糕

Answer 2

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

这是简单的纯 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(/&nbsp;/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 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.
    }
});

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

How to use jquery to prevent a editable div reach over our restricting length

html

javascript

jquery

maxlength

contenteditable

那么我如何才能持续检查用户在内容可编辑中输入的单词 div 并在达到限制时提醒他们？