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. 

        }
    }
});

就像我说的，当我在输入/ textarea上使用它时，这段代码就可以了。谢谢。

Answer 1

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

示例小提琴（例如，给定长度为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位）上测试过的代码，在生产中使用之前在支持的浏览器上进行测试。

jQuery | e.preventDefault无法处理contentEditable div

1 个答案: