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

相关推荐
小二·11 小时前
Python Web 开发进阶实战(终章):从单体应用到 AI 原生生态 —— 45 篇技术演进全景与未来开发者生存指南
前端·人工智能·python
m0_6372565811 小时前
vue-baidu-map添加了类型组件导致非常卡顿的问题
前端·javascript·vue.js
雨季66611 小时前
基于设备特征的响应式 UI 构建:Flutter for OpenHarmony 中的智能布局实践
javascript·flutter·ui
挂机且五杀11 小时前
为什么在React地图组件里,memo 不是优化,而是生存?
前端·react.js·前端框架
RFCEO11 小时前
HTML编程 课程七、:HTML5 新增表单标签与属性
前端·html·html5·搜索框·手机号·邮箱验证·日期选择
刘一说11 小时前
Vue开发中的“v-model陷阱”:为什么它不能用于非表单元素?
前端·javascript·vue.js
利刃大大12 小时前
【Vue】组件生命周期 && 组件生命周期钩子
前端·javascript·vue.js·前端框架
建群新人小猿13 小时前
陀螺匠企业助手—个人简历
android·大数据·开发语言·前端·数据库
CHU72903514 小时前
在线教学课堂APP前端功能:搭建高效线上教学生态
前端·人工智能·小程序·php
be or not to be14 小时前
JavaScript 对象与原型
开发语言·javascript·ecmascript