如何禁用textarea粘贴功能或修复字符长度统计异常问题？

你的代码只监听了keydown事件，但粘贴操作（无论是Ctrl+V快捷键还是右键菜单粘贴）不会触发该事件，而且keydown触发时textarea的内容还未完成更新，导致计数器显示旧值。以下是两种可行方案：

方案一：修复计数器并完善字符限制（推荐） #

将事件监听替换为input事件，它能覆盖所有文本内容变更场景（输入、粘贴、剪切、删除等），同时修正原代码中不合理的按键限制逻辑：

修改后的JavaScript代码 #

const textarea = document.getElementById('textarea');
const span = document.getElementById('span');
const MAX_ALLOWED_LENGTH = 9; // 允许的最大字符数

// 初始化计数器
span.textContent = textarea.value.length;

// 监听所有内容变更事件
textarea.addEventListener('input', () => {
    // 实时更新计数器
    span.textContent = textarea.value.length;
    
    // 超过长度限制时自动截断文本
    if (textarea.value.length > MAX_ALLOWED_LENGTH) {
        textarea.value = textarea.value.slice(0, MAX_ALLOWED_LENGTH);
        span.textContent = MAX_ALLOWED_LENGTH;
    }
});

// 限制仅允许输入字母及必要控制键
textarea.addEventListener('keydown', (event) => {
    const isLetter = event.keyCode >= 65 && event.keyCode <= 90;
    // 允许退格、删除、方向键等控制键
    const isControlKey = event.keyCode === 8 || event.keyCode === 46 || (event.keyCode >= 37 && event.keyCode <= 40);
    
    if (!isLetter && !isControlKey) {
        event.preventDefault();
    }
});

关键改进点 #

• input事件确保所有内容变更操作都会触发计数器更新，包括粘贴。
• 修正原代码错误：原逻辑会阻止退格、删除等必要控制键，现在只拦截非字母且非控制键的输入。
• 超过长度限制时自动截断文本，避免用户输入/粘贴超长内容。

方案二：禁用粘贴功能 #

如果业务需求明确需要禁止粘贴，只需监听paste事件并阻止默认行为：

修改后的JavaScript代码 #

const textarea = document.getElementById('textarea');
const span = document.getElementById('span');
const MAX_ALLOWED_LENGTH = 9;

// 初始化计数器
span.textContent = textarea.value.length;

textarea.addEventListener('keydown', (event) => {
    span.textContent = textarea.value.length;
    
    const isLetter = event.keyCode >= 65 && event.keyCode <= 90;
    const isControlKey = event.keyCode === 8 || event.keyCode === 46 || (event.keyCode >= 37 && event.keyCode <= 40);
    
    if (textarea.value.length > MAX_ALLOWED_LENGTH || (!isLetter && !isControlKey)) {
        event.preventDefault();
    }
});

// 禁用所有粘贴操作
textarea.addEventListener('paste', (event) => {
    event.preventDefault();
});

说明 #

• 监听paste事件并调用event.preventDefault()，可完全阻止Ctrl+V、右键菜单粘贴等操作。
• 同样修复了原代码中控制键被拦截的问题，保证用户正常编辑体验。

内容的提问来源于stack exchange，提问作者TAHER El Mehdi