uni-app 剪贴板内容怎么获取并显示在页面上-uni-app-PHP中文网

uni.getclipboarddata必须由用户点击触发，不能在onload/onshow或异步回调中调用；需配置对应平台权限，读取后须清洗零宽字符，并用$nexttick处理聚焦与选中。

uni-app 剪贴板内容怎么获取并显示在页面上

uni.getClipboardData 必须由用户点击触发

直接在 onLoad 或 onShow 里调用 uni.getClipboardData，99% 会失败——iOS 14+ 和多数 Android 厂商（华为、小米）明确要求剪贴板读取必须来自用户手势。H5 更是完全不支持静默读取，浏览器策略直接拦截。

正确做法是绑定按钮事件：@click="handlePaste"，并在方法中调用：

handlePaste() {
  uni.getClipboardData({
    success: (res) => {
      this.clipboardText = String(res.data || '').trim()
    },
    fail: (err) => {
      console.error('读取剪贴板失败', err)
      // 提示用户手动授权或检查设置
    }
  })
}

不能写在 setTimeout、Promise.then 或异步回调里，哪怕只延迟 1ms 也会被判定为非用户上下文
微信小程序需提前在 manifest.json 的 mp-weixin 节点下配置权限："permission": { "scope.writeClipboard": { "desc": "用于粘贴口令" } }
iOS 真机首次调用会弹系统授权框，拒绝后后续调用始终返回空，必须引导用户去「设置 → 隐私与安全性 → 剪贴板」手动开启

剪贴板内容常含不可见字符，直接显示会出错

用户从微信、钉钉等 App 复制的文本，大概率混入零宽空格（\u200b）、左到右标记（\u200e）等不可见控制符。看着是空字符串，但 data.length > 0，data.trim() 也清不掉。

建议统一清洗后再赋值给页面变量：

const cleanText = (str) => {
  return String(str || '').replace(/[\u200b-\u200f\u202a-\u202f\uFEFF]/g, '').trim()
}

// 使用时
uni.getClipboardData({
  success: (res) => {
    this.clipboardText = cleanText(res.data)
  }
})

别只依赖 trim()，它对零宽字符无效
如果业务涉及邀请码、验证码等关键字段，清洗后还应做正则提取，比如 text.match(/invite=([a-z0-9]{6,12})/)?.[1]
H5 平台调用 uni.getClipboardData 永远返回空或报 permission-denied，不要尝试兼容，直接隐藏该功能或提示“仅 App / 小程序可用”

输入框自动聚焦并选中内容要加 `$nextTick`

读取成功后想把内容填进 <input ref="input"> 并让光标就位，直接 this.$refs.input.focus() 在 Vue 3（或某些编译模式下）可能失效——DOM 还没更新完。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

必须包裹在 this.$nextTick 中：

uni.getClipboardData({
  success: (res) => {
    this.inputValue = cleanText(res.data)
    this.$nextTick(() => {
      this.$refs.input?.focus()
      // iOS Safari 需要显式选中，否则 focus 后光标不在开头
      const el = this.$refs.input
      if (el && el.setSelectionRange) {
        el.setSelectionRange(0, el.value.length)
      }
    })
  }
})