真正起效的密码框剪切防护是通过 addEventListener 同步拦截 copy/cut/paste 事件并调用 preventDefault(),oncut 属性在现代浏览器及移动端已基本失效,且前端拦截无法防止 DevTools 窥探 value。

oncut 事件本身不能阻止密码框剪切,必须配合 preventDefault()
直接写 oncut="return false" 在现代浏览器(Chrome 120+、Firefox 115+、Safari 17+)中基本失效。浏览器会忽略该返回值,仍允许 Ctrl+X 或右键剪切。真正起效的是在事件监听中调用 event.preventDefault() —— 这是唯一被所有主流浏览器尊重的阻断方式。
必须同时监听 copy/cut/paste 三个事件
只处理 oncut 会留下明显缺口:用户可先复制其他文本,再粘贴进密码框;或用剪切板管理器绕过。实际需同步拦截:
-
copy:防止从密码框内复制出去 -
cut:防止从密码框内剪切出去 -
paste:防止外部内容粘贴进来
示例代码必须这样写:
<input type="password" id="pwd">
<script>
const pwd = document.getElementById('pwd');
['copy', 'cut', 'paste'].forEach(evt => {
pwd.addEventListener(evt, e => e.preventDefault());
});
</script>
移动端和 Safari 的特殊坑:oncut 属性完全不触发
在 iOS Safari 和部分 Android WebView 中,oncut 内联属性根本不会被调用,连日志都打不出来。只有通过 addEventListener 绑定才能保证事件进入 JS 上下文。另外,user-select: none 会破坏 iOS 软键盘唤起,别加在 <input> 上——它禁的是光标定位,不是剪切行为。
立即学习“前端免费学习笔记(深入)”;
autocomplete="off" 和 readonly 都不是剪切防护手段
autocomplete="off" 只影响浏览器自动填充建议,和剪切无关;readonly 会让输入框无法获得焦点、软键盘不弹出,且用户删掉属性就能立刻恢复操作。真要防误操作,重点应放在事件拦截 + 清晰提示文案(如“请手动输入密码”),而不是制造不可用状态。
最常被忽略的一点:即使全量拦截了事件,用户仍可通过 DevTools 直接读取 DOM 的 value 属性——这说明前端剪切防护本质是防误、非防恶意,别把它当成安全边界。



















