uni-app H5平台下 uni.setClipboardData API调用会调起手机键盘

uni-app H5平台下 uni.setClipboardData API调用会调起手机键盘

开发环境 版本号 项目创建方式
Windows W11 HBuilderX

操作步骤：

如题

预期结果：

如题

实际结果：

如题

bug描述：

如题

14 回复

问题已确认，已加分。预计下版修复

更多关于uni-app H5平台下 uni.setClipboardData API调用会调起手机键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html


alpha 3.3.1 已修复

企业微信内置的浏览器也有这个问题，请问怎么解决？ “@dcloudio/uni-h5”: “^2.0.0-alpha-31920210715002”,

回复 L***@163.com: 建议升级至新版重试

回复 DCloud_UNI_LXH: 单独升级@dcloudio/uni-h5到2.0.1-alpha-33120211214001这个版本，会报错 locale.trim is not a function

回复 L***@163.com: 贴具体错误信息

回复 DCloud_UNI_LXH: chunk-vendors.js:27007 Uncaught TypeError: locale.trim is not a function at normalizeLocale (chunk-vendors.js:27007:19) at I18n.setLocale (chunk-vendors.js:27071:21) at new I18n (chunk-vendors.js:27058:10) at initVueI18n (chunk-vendors.js:27141:14) at Object.a6b0 (chunk-vendors.js:19862:39) at n (chunk-vendors.js:1488:19) at Module.b501 (chunk-vendors.js:21430:15) at n (chunk-vendors.js:1488:19) at r (chunk-vendors.js:3547:16) at chunk-vendors.js:22860:26

回复 DCloud_UNI_LXH: 麻烦大佬看一下，这是报错信息

回复 L***@163.com: 运行在哪儿？直接运行就报错了？

回复 DCloud_UNI_LXH: 是的，本地编译结束之后，在浏览器上浏览，就会报错，页面也不会加载出来

回复 DCloud_UNI_LXH: “@dcloudio/uni-app-plus”: “^2.0.0-31920210709003”, “@dcloudio/uni-h5”: “^2.0.1-alpha-33120211214001”, “@dcloudio/uni-helper-json”: “*”, “@dcloudio/uni-i18n”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-360”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-alipay”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-baidu”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-kuaishou”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-qq”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-toutiao”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-vue”: “^2.0.0-31920210709003”, “@dcloudio/uni-mp-weixin”: “^2.0.0-31920210709003”, “@dcloudio/uni-quickapp-native”: “^2.0.0-31920210709003”, “@dcloudio/uni-quickapp-webview”: “^2.0.0-31920210709003”, “@dcloudio/uni-stat”: “^2.0.0-31920210709003”, “@dcloudio/uni-ui”: “^1.3.7”,

https://github.com/dcloudio/uni-app/issues/3569

uni.setClipboardData 调用这个API，还是会调起手机键盘，请问这个有解决方法吗？

在uni-app H5平台下，uni.setClipboardData API调用时调起手机键盘属于异常行为。该API设计用于将数据写入剪贴板，不应触发键盘事件。

可能原因及排查方向：

  1. 焦点问题：调用API时当前页面可能存在获得焦点的输入元素，导致键盘跟随弹出。建议检查调用前后是否有focus()操作或自动聚焦属性。
  2. 兼容性问题：部分浏览器对剪贴板API的实现存在差异，可尝试：
    • 使用navigator.clipboard.writeText()进行降级兼容
    • 添加setTimeout延迟调用避免焦点冲突
  3. 框架层事件冒泡：检查是否有点击事件冒泡到输入元素，可在调用前主动调用blur()移除焦点。

临时解决方案：

// 调用前移除焦点
document.activeElement.blur()
setTimeout(() => {
  uni.setClipboardData({
    data: '文本内容',
    success: () => {
      uni.showToast({ title: '复制成功' })
    }
  })
}, 50)
回到顶部