解决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 问题得到正常解决!~

相关推荐
嘻嘻嘻嘻嘻嘻ys2 分钟前
《Spring Boot 3响应式架构实战:R2DBC驱动的高并发数据持久化革命》
前端·后端
滚石_stars2 分钟前
了解 CSS 的 display: inline-flex;
前端
程序员Bears2 分钟前
HTML5 新特性详解:语义化标签、表单与音视频嵌入
前端·html·html5·visual studio code
进取星辰2 分钟前
14、服务端组件:未来魔法预览——React 19 RSC实践
前端·react.js·前端框架
前端大白话8 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
剽悍一小兔8 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q8 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang9 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang9 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein9 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试