javascript - 查询 | e.preventDefault 不适用于 contentEditable div

Question

我有代码对内容可编辑的 div 强制执行最大字符限制。出于某种原因，e.preventDefault 不工作。
如果我在输入上使用它，则同样的代码可以工作。

$(document).on("keyup", ".note .editable-text", function (e) {
    $element = $(e.target);
    if (e.keyCode != 8) { /* Backspace not pressed */
        if ($element.text().length > 150) {
            e.preventDefault();
            e.stopPropagation(); //I wasn't sure if this was necessary, just added it in to see if it would help. It didn't. 

        }
    }
});

就像我说的，当我在输入/文本区域上使用这段代码时，它是有效的。谢谢。

Answer 1

如果您试图阻止用户输入一定长度的文本，您需要使用 keydown 事件，因为使用 keyup 文本已经更新，是的 e.stopPropagation(); 这里不需要。直到此 div 的任何父级捕获 keydown 事件。

示例 fiddle (例如给定长度 10):

$(document).on("keydown", ".editable-text", function(e) {
  $element = $(e.target);
  if (e.keyCode != 8) { /* Backspace not pressed */
    if ($element.text().length > 10) {
      e.preventDefault();
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable-text" contenteditable>hello</div>

更新

更新了代码段以包含 ctrl + a 和其他功能。

function getSelectedText() {
  var text = "";
  if (typeof window.getSelection != "undefined") {
    text = window.getSelection().toString();
  } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
    text = document.selection.createRange().text;
  }
  return text;
}

$(document).on("keydown", ".editable-text", function(e) {
  $element = $(e.target);
  if (!e.ctrlKey && !getSelectedText()) {
    if (e.keyCode != 8) {
      if ($element.text().length > 10) {
        e.preventDefault();
      }
    }
  }
});




$(document).on("paste", ".editable-text", function(e) {
  $element = $(e.target);
  if (e.originalEvent.clipboardData.getData('text').length + $element.text().length > 10) {
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable-text" contenteditable>hello</div>

注意:在 Firefox 51.0.1(32 位)上测试过的代码，在用于生产之前在支持的浏览器上测试它。