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` 的值,这似乎是某个表单或对象中的快递单号。
  1. 设置 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`),则控制台将打印 "不兼容"。
  1. 移除 input 的焦点
inputVal.blur()

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

showToast('复制成功!!')

调用 showToast 函数( “复制成功!!” 文本的提示消息)。

压图地址

image.png

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

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

压图地址

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

🌟 功能亮点:

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

💡

压图地址

  • 17
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端 H5 的兼容性问题主要包括以下几个方面: 1. 屏幕适配问题:由于移动设备的屏幕尺寸和分辨率千差万别,需要对页面进行响应式设计,以适应不同的屏幕大小。 2. 浏览器兼容性问题:不同的移动设备可能使用不同的浏览器,而不同的浏览器对 HTML、CSS、JavaScript 的支持程度也有差异,需要进行兼容性测试。 3. 图片加载问题:移动设备的网络环境比 PC 端要差,需要对图片进行优化,以减少页面加载时间。 4. 动画效果问题:移动设备的硬件性能相对较弱,需要对动画效果进行优化,以避免卡顿现象。 5. 视频播放问题:不同的移动设备可能使用不同的视频格式,需要对视频进行兼容性处理。 6. 输入框兼容性问题:移动设备的软键盘弹出时可能会遮挡输入框,需要对输入框进行特殊处理。 7. 其他特殊问题:如微信浏览器的 JS-SDK 接口、单页应用路由跳转问题等。 针对以上问题,可以采用以下方法进行解决: 1. 使用响应式布局方案,如 Bootstrap、Foundation 等。 2. 使用浏览器兼容性 CSS 样式,如 -webkit-、-moz-、-ms- 等。 3. 对图片进行压缩,使用适当的图片格式,如 JPEG、PNG、SVG 等。 4. 使用 CSS3 动画代替 JavaScript 动画,或者使用 JavaScript 动画代替 GIF 动画。 5. 使用 HTML5 视频标签,同时提供多种视频格式。 6. 对输入框进行特殊处理,如监听软键盘事件,调整输入框位置等。 7. 针对特殊问题,查找相关资料或者咨询专业人士进行解决。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值