解决ios17无法复制的问题

原代码写过一片js实现复制的代码 那段代码有问题 以下是之前写的一段有问题的原代码:

javascript 复制代码
 let url = "kkkkkk";
      const hiddenTextarea = document.createElement("textarea");
      hiddenTextarea.style.position = "absolute";
      hiddenTextarea.style.left = "-9999px";
      hiddenTextarea.setAttribute("readonly", "");
      hiddenTextarea.value = url;
      document.body.appendChild(hiddenTextarea);
      hiddenTextarea.select();
      hiddenTextarea.focus();
      document.execCommand("copy");
      showToast("复制成功");
      // 清除虚拟焦点元素
      document.body.removeChild(hiddenTextarea);

之前ios都是好好的 奈何ios升级了17版本 于是我的复制就不生效了 不过又发现一段新代码 尝试了下 ios17可正常复制

修改后:

javascript 复制代码
  const textarea = document.createElement("textarea");
      textarea.style.position = "fixed";
      textarea.style.top = 0;
      textarea.style.left = 0;
      textarea.style.border = "none";
      textarea.style.outline = "none";
      textarea.style.resize = "none";
      textarea.style.background = "transparent";
      textarea.style.color = "transparent";
      textarea.value = url; // 修改文本框的内容
      document.body.appendChild(textarea);
      textarea.select(); // 选中文本
      try {
        const msg = document.execCommand("copy") ? "复制成功" : "复制失败";
        // H.$toast("复制成功");
        showToast(`${msg}`);
      } catch (err) {
        // alert("unable to copy", err);
        // H.$toast("复制失败");
        showToast("复制失败");
      }
      document.body.removeChild(textarea);

原因可能是第一段代码中的 hiddenTextarea.setAttribute("readonly", "");";设置导致在iOS 17上无法复制。而第二段代码中,将这个属性删除,从而在iOS 17上可以正常复制。

so 问题得到正常解决!~

相关推荐
万少3 分钟前
使用Trae轻松安装openclaw的教程-附带免费token
前端·openai·ai编程
颜酱19 分钟前
一步步实现字符串计算器:从「转整数」到「带括号与优化」
javascript·后端·算法
浪浪山_大橙子20 分钟前
OpenClaw 十分钟快速,安装与接入完全指南 - 推荐使用trae 官方 skills 安装
前端·人工智能
忆江南23 分钟前
iOS 可视化埋点与无痕埋点详解
前端
离开地球表面_9925 分钟前
金三银四程序员跳槽指南:从简历到面试再到 Offer 的全流程准备
前端·后端·面试
_柳青杨27 分钟前
跨域获取 iframe 选中文本?自己写个代理中间层,再也不求后端!
前端
比尔盖茨的大脑27 分钟前
事件循环底层原理:从 V8 引擎到浏览器实现
前端·javascript·面试
天才熊猫君27 分钟前
Vue3 命令式弹窗原理和 provide/inject 隔离机制详解
前端
bluceli28 分钟前
Vue 3 Composition API深度解析:构建可复用逻辑的终极方案
前端·vue.js
程序员ys30 分钟前
前端权限控制设计
前端·vue.js·react.js