可通过HTML pattern属性（提交时校验）或JavaScript input事件（实时过滤）限制输入框仅允许英文字母和数字；pattern="[a-zA-Z0-9]*"配合title和required实现基础验证，input事件中用replace(/[^a-zA-Z0-9]/g, '')实时清理非法字符，并可扩展paste事件处理粘贴内容。
可以通过 HTML 的 pattern 属性 结合正则表达式，或搭配 JavaScript 的 input 事件实时拦截非法字符，来限制输入框只允许英文字母和数字。
使用 pattern 属性（基础校验，提交时生效）
pattern 是 HTML5 表单验证属性，它定义输入内容必须匹配的正则规则。注意：它只在表单提交时触发验证，不阻止用户输入非法字符，仅用于提示和阻止提交。
- 正则表达式
[a-zA-Z0-9]*表示“零个或多个英文字母（大小写）和数字” - 加上
title属性可自定义错误提示 - 若要求非空，可加
required
用 input 事件 + JavaScript 实时过滤（推荐，真正阻止输入）
监听 input 事件，在每次输入后立即清理非法字符，体验更友好、控制更严格。
- 用
replace(/[^a-zA-Z0-9]/g, '')删除所有非字母数字字符 - 建议同时绑定
keydown（可选）防止粘贴或组合键异常，但input已覆盖大部分场景 - 适用于单个输入框或批量初始化
<script>
const input = document.getElementById('alphaNumInput');
input.addEventListener('input', () => {
input.value = input.value.replace(/[^a-zA-Z0-9]/g, '');
});
</script>
增强版：支持粘贴内容过滤
用户可能通过右键粘贴含空格、符号的文本，单纯监听 input 有时滞后。可额外监听 paste 事件并同步处理。
立即学习“前端免费学习笔记（深入）”；
- 在
paste事件中，获取剪贴板文本，清洗后再插入 - 调用
event.preventDefault()阻止默认粘贴，再手动设置清洗后的值 - 注意兼容性：现代浏览器均支持
e.preventDefault();
const text = e.clipboardData.getData('text');
const cleaned = text.replace(/[^a-zA-Z0-9]/g, '');
input.value += cleaned;
});
补充说明：区分大小写与空格处理
上述正则 [a-zA-Z0-9] 已包含大小写字母和数字，不匹配空格、中文、标点、下划线等。如需允许下划线，可改为 [a-zA-Z0-9_]；如需禁止大写，用 [a-z0-9] 即可。空格默认被过滤，无需额外处理。
