readonly仅禁键盘输入但允许js修改和表单提交，disabled彻底禁用交互且不提交值，keydown拦截可禁输入但需额外处理粘贴等场景，pattern仅校验不拦截输入。

readonly 属性只禁键盘输入，不防 JS 修改

加 readonly 后用户无法手动编辑，但 input.value = 'xxx' 依然能改，且表单提交时该值照常发送。适合“显示固定内容但需提交”的场景，比如订单号、预填用户名。

常见误操作：

• 写成 readonly="false" —— 无效，只要属性存在就生效
• 对 type="checkbox" 或 type="radio" 使用 readonly —— 浏览器不支持，直接忽略
• 用 CSS 覆盖默认样式时漏掉 cursor: not-allowed —— 用户看不出不可编辑

disabled 属性彻底禁用交互且不提交值

disabled 会让元素失焦、不可选、不可复制、不可触发 input 或 change 事件，最关键的是：它的值不会出现在表单提交数据中。

适用场景：

• 表单验证未通过时临时禁用提交按钮
• 依赖其他字段状态才启用的输入项（如“省份”选完才放开“城市”）
• 用 fieldset 包裹一组控件并整体 disabled，比逐个设置更简洁

注意：disabled 元素默认灰阶样式在 IE8 及以下不支持伪类 :disabled，得用属性选择符 input[disabled] 或额外 class 兜底。

用 JavaScript 拦截 keydown 阻止一切输入

如果既要保留元素可聚焦、可复制，又要完全禁止输入（包括粘贴），keydown + preventDefault() 是最直接的方案。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

示例代码：

const input = document.querySelector('input[data-no-input]');
input.addEventListener('keydown', e => e.preventDefault());

这个方法绕过了 readonly 和 disabled 的语义限制，但要注意：

• 它不阻止右键粘贴（需额外监听 paste 事件）
• 移动端软键盘仍会弹出，只是按下去没反应
• 若同时需要禁用选中，得配合 user-select: none 和 pointer-events: none（后者会连聚焦都禁掉）

pattern + HTML5 表单验证只做格式校验，不禁止输入

pattern 属性本身不会阻止用户输入，只在表单提交或调用 checkValidity() 时校验正则匹配结果。用户依然可以随意敲字，错误时浏览器仅高亮或提示“请与所要求的格式匹配”。

真正想“禁止输入特殊字符”，得搭配 JS：

• 监听 input 事件 + replace() 过滤（适合事后清理）
• 监听 keypress + String.fromCharCode() 判断按键（实时拦截，但不处理粘贴和 IME 输入）
• 监听 beforeinput（现代浏览器支持，能捕获粘贴、拖入、IME 等所有输入源，但兼容性不如 input）

别指望仅靠 pattern 实现输入拦截——它只是声明式约束，不是防御性屏障。

真正难处理的是粘贴、拖放文本、IME 输入这些非键盘路径；如果业务上真要“不可变”，前端只能尽量拦，后端必须校验原始值是否被篡改过。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！