h5兼容问题 复制粘贴移动端无法粘贴复制内容

const selectText = (textbox, startIndex, stopIndex) => {
      if (textbox.createTextRange) {//ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);//起始光标
        range.moveEnd('character', stopIndex - startIndex);//结束光标
        range.select();//不兼容苹果
      } else {//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
      }
    }

const toastFn = () => {
  const inputVal = document.createElement('input')
  inputVal.setAttribute('readonly', 'readonly')
  inputVal.setAttribute('value', formData.value.express_number)
  inputVal.style.position = 'absolute'
  inputVal.style.opacity = 0;
  inputVal.style.left = '-9999999px'
  inputVal.style.top = '-9999999px'
  document.body.appendChild(inputVal)
  selectText(inputVal, 0, formData.value.express_number.length)
  if (document.execCommand('copy')) {
    document.execCommand('copy')

  } else {
    console.log('不兼容')
  }
  inputVal.blur()
  showToast('复制成功！！')
}

这段代码定义了一个名为 toastFn 的函数，其主要目的是创建一个不可见的 input 元素，设置其 value 为某个快递单号（formData.value.express_number），然后尝试复制这个快递单号，并在成功后显示一个提示。下面是对代码的逐行解释：

1. 定义函数：

const toastFn = () => {

定义了一个箭头函数 toastFn。
2. 创建 input 元素：

const inputVal = document.createElement('input')

使用 document.createElement 方法创建一个新的 input 元素，并将其引用存储在 inputVal 变量中。
3. 设置 input 属性：

inputVal.setAttribute('readonly', 'readonly')
inputVal.setAttribute('value', formData.value.express_number)

* 设置 `readonly` 属性，使该输入框为只读。
* 设置 `value` 属性为 `formData.value.express_number` 的值，这似乎是某个表单或对象中的快递单号。

4. 设置 input 样式：

inputVal.style.position = 'absolute'
inputVal.style.opacity = 0;
inputVal.style.left = '-9999999px'
inputVal.style.top = '-9999999px'

通过内联样式设置 input 元素的位置和可见性，使其绝对定位在屏幕外，并且不可见（opacity: 0）。
5. 将 input 添加到 body：

document.body.appendChild(inputVal)

将创建的 input 元素添加到文档的 body 中。
6. 选择并复制文本：

selectText(inputVal, 0, formData.value.express_number.length)
if (document.execCommand('copy')) {
    document.execCommand('copy')
} else {
    console.log('不兼容')
}

* 调用 `selectText` 函数（该函数在代码段中未给出，但可能是用于选择输入框中从第 0 个字符到快递单号长度的文本）。
* 使用 `document.execCommand('copy')` 尝试复制选中的文本。注意，这里有一个逻辑错误：即使前面的条件判断 `if (document.execCommand('copy'))` 已经执行了复制操作，但后面的 `document.execCommand('copy')` 仍然会被执行。通常，我们应该只在判断该命令是否可用时调用它一次。
* 如果复制操作不支持（即 `document.execCommand('copy')` 返回 `false` 或 `undefined`），则控制台将打印 "不兼容"。

7. 移除 input 的焦点：

inputVal.blur()

使用 blur 方法从 input 元素中移除焦点。
8. 显示提示：

showToast('复制成功！！')

调用 showToast 函数（ “复制成功！！” 文本的提示消息）。

压图地址

一个功能强大的图片处理工具，它可以满足用户对于图片压缩、格式转换、质量调节以及长图片分割等多种需求。

【轻松压缩，一键搞定】您的图片处理神器来了！

压图地址

🎉 您是否曾为图片太大无法上传而烦恼？是否为图片格式不兼容而头疼？现在，有了我们的图片处理工具，这些问题将不复存在！

🌟 功能亮点：

批量压缩：无论您有多少张图片，无论尺寸大小，我们的工具都能一次性处理，让您的工作效率翻倍！
格式转换：支持多种图片格式之间的轻松转换，满足您在不同场景下的使用需求。
压缩质量可调：想要保留更多细节？还是追求更小的文件大小？压缩质量由您说了算！
长图片分割：再也不用担心长图无法完整显示或处理了，我们的工具能轻松将长图分割成多张图片，方便您进行后续编辑和分享。
获取网络图片：可将网络路径图片路径，转化成自己的图片进行处理下载
📷 无论是从相机导出的大图，还是手机拍摄的生活照，我们的工具都能轻松应对，让您的图片处理变得简单又高效！

💡

压图地址