禁用uni-app input粘贴须三重防护:设置onpaste="return false"属性、绑定@paste.stop.prevent(仅H5)、样式加user-select: none;同时type设text,配合focusable="false"、blur()及长按拦截,彻底剥离可编辑上下文。

uni-app里禁用input粘贴的正确写法
直接在<input>上加@paste.prevent是无效的——uni-app的@paste事件只在H5平台部分浏览器生效,App和小程序根本不触发该事件。真正可靠的方式是组合原生属性 + 事件拦截 + 样式防护。
必须同时设置三个层面:属性、事件、样式
单靠某一种方式都会被绕过,尤其是iOS和微信小程序环境。
-
onpaste="return false":写在<input>标签内,对H5和部分App有效,但微信小程序会忽略该内联属性 -
@paste.stop.prevent:仅H5可用,且需配合user-select: none防止长按唤出菜单 -
password="true"或type="text"+focusable="false"+blur():适用于支付密码类场景,彻底断开系统键盘关联(见下一条)
为什么type="password"不能直接用
uni-app中<input type="password">在iOS和部分安卓机型上仍可能唤起系统键盘并支持粘贴,且明文字符会被自动遮盖,无法做自定义圆点渲染。更关键的是:它不阻止长按选中,用户仍可复制已有内容。
- 改用
type="text",配合style="font-family: monospace; letter-spacing: 8px;"模拟密码样式 - 用
v-model绑定的值实时转为•显示,真实值存在data里 - 在
@focus中立即调用this.$nextTick(() => this.$refs.input.blur()),并设focusable="false" - 容器层加
user-select: none; -webkit-user-select: none;防文字选择
容易被忽略的兼容性坑
Android WebView和微信内置浏览器对onpaste的支持极不稳定,有些版本会静默忽略,有些则只拦截右键粘贴但放行长按菜单里的“粘贴”项。
- 微信小程序必须用
catch:longpress+@touchstart.prevent封死长按路径,否则用户长按仍能呼出粘贴菜单 - App端iOS真机上,即使加了
onpaste="return false",若未在manifest.json中开启「剪贴板」权限,系统可能直接跳过拦截逻辑而允许粘贴 - H5环境下,
document.execCommand('paste')已废弃且不被支持,不要尝试在@paste回调里手动执行
paste重要得多。


















