如何优化contenteditable元素的字符限制代码？

针对你代码里的三个问题，这里给出完整的修复方案：

修复后的完整代码 #

HTML

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div contenteditable="true" class="editable"></div>
<span class="char-count">Total chars: 0</span>

CSS

.editable {
  height: 100px;
  width: 300px;
  border: 1px solid grey;
  outline: 0;
  padding: 8px;
}
.char-count {
  display: block;
  margin-top: 8px;
}

JavaScript

const MAX_LENGTH = 10;
const ALLOWED_INPUT_TYPE = 'number'; // 改成 'letter' 即可限制仅输入英文

$('.editable').on('keydown', function(event) {
  const currentLength = $(this).text().length;
  $('.char-count').text(`Total chars: ${currentLength}`);

  // 放行常用控制操作：方向键、退格、删除、Ctrl组合键（全选/复制/粘贴/剪切）
  const allowedKeys = [8, 9, 37, 38, 39, 40, 46];
  const isCtrlCombo = (event.ctrlKey || event.metaKey) && 
                      [65, 67, 86, 88].includes(event.keyCode);

  if (allowedKeys.includes(event.keyCode) || isCtrlCombo) return;

  // 字符数达上限时阻止输入
  if (currentLength >= MAX_LENGTH) {
    event.preventDefault();
  }

  // 过滤输入：只允许数字或英文
  const key = String.fromCharCode(event.keyCode);
  if (ALLOWED_INPUT_TYPE === 'number' && !/^\d$/.test(key)) {
    event.preventDefault();
  } else if (ALLOWED_INPUT_TYPE === 'letter' && !/^[a-zA-Z]$/.test(key)) {
    event.preventDefault();
  }
}).on('paste', function(event) {
  event.preventDefault();
  const pastedText = (event.originalEvent || event).clipboardData.getData('text');
  let filteredText = pastedText;
  
  // 过滤粘贴的内容
  if (ALLOWED_INPUT_TYPE === 'number') {
    filteredText = pastedText.replace(/[^\d]/g, '');
  } else if (ALLOWED_INPUT_TYPE === 'letter') {
    filteredText = pastedText.replace(/[^a-zA-Z]/g, '');
  }

  // 截断到剩余可输入长度
  const remaining = MAX_LENGTH - $(this).text().length;
  const finalText = filteredText.substring(0, remaining);
  
  // 插入处理后的文本
  document.execCommand('insertText', false, finalText);
  $('.char-count').text(`Total chars: ${$(this).text().length}`);
}).on('input', function() {
  $('.char-count').text(`Total chars: ${$(this).text().length}`);
});

关键修复点说明 #

1. 恢复控制按键功能
   明确列出允许的控制按键（方向键、退格、删除等），同时放行Ctrl+A/C/V/X这类常用编辑组合键，避免字符达上限后无法正常编辑。

2. 拦截超限粘贴
   监听paste事件，先阻止默认粘贴，对剪贴板内容做过滤和长度截断，只插入符合要求且不超限的内容。

3. 限制输入类型
   通过按键过滤和粘贴内容过滤双重控制，只需修改ALLOWED_INPUT_TYPE的值，就能切换成仅允许数字或英文输入。

内容的提问来源于stack exchange，提问作者AbleInfosoft Gmail