How to copy text to clipboard in uniapp

In Uniapp, copying text to the clipboard can be achieved through an API officially provided by uniapp. This article will introduce how to call this API to realize the function of copying text to the clipboard.

1. Introduction of API

Introduce H5 API directly into the code. The code is as follows:

if (navigator.clipboard) {
  navigator.clipboard.writeText('要复制到剪贴板中的文字');
  uni.showToast({
    title: "复制成功",
    icon: "success",
    duration: 2000
  });
} else {
  uni.showToast({
    title: "复制失败，当前浏览器不支持",
    icon: "none",
    duration: 2000
  });
}

2. Implementation method

1. Determine the browser Whether the copy function is supported, if not supported, failure will be returned.

if (!navigator.clipboard) {
  uni.showToast({
    title: "当前浏览器未能支持此功能，请更换浏览器",
    icon: "none",
    duration: 2000
  });
}

2. Use API to copy text to the clipboard and prompt success.

navigator.clipboard.writeText('要复制到剪贴板中的文字').then(function () {
  uni.showToast({
    title: "复制成功",
    icon: "success",
    duration: 2000
  });
}, function (err) {
  uni.showToast({
    title: "复制失败，请手动复制",
    icon: "none",
    duration: 2000
  });
});

3. The complete code

The code is as follows:

// 判断是否支持复制功能
if (!navigator.clipboard) {
  uni.showToast({
    title: "当前浏览器未能支持此功能，请更换浏览器",
    icon: "none",
    duration: 2000
  });
  return;
}

// 复制内容到剪贴板
navigator.clipboard.writeText('要复制到剪贴板中的文字').then(function () {
  uni.showToast({
    title: "复制成功",
    icon: "success",
    duration: 2000
  });
}, function (err) {
  uni.showToast({
    title: "复制失败，请手动复制",
    icon: "none",
    duration: 2000
  });
});

4. Notes

1. The API can only be used in HTTPS websites.

2. This API has low support in mobile browsers and may cause instability problems.

3. In order to improve user experience, it is best to provide a manual copy solution for user reference.

The above is the detailed content of How to copy text to clipboard in uniapp. For more information, please follow other related articles on the PHP Chinese website!