H5移动端完美实现点击复制文本的解决方法，已经自测！

简介
当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法，通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作
(如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable，通过执行execCommand
方法可以对当前活动元素进行很多操作。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

执行以下解决方案条件：(这个是原理)

①执行复制方法时所复制文字不能被任何块级元素和行内块元素和行内元素遮盖否则无效；（解决方案：将文本通过绝对定位或其他方式移除屏幕外）

②ios中不能复制属性值，只能复制文本元素节点；（解决方案：可以把文字颜色设成背景色就能达到隐藏看不见的效果不影响显示）；

②今天咱们只会用到 copy .

简介里说当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法.

但是咱们根本不想出现一个 textarea 好嘛, 否则和window.prompt有啥区别呢?

最简单最有效的方式就是把 textarea 给隐藏起来嘛

js代码

copy = () => {if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备console.log('ios')window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效var Url2=document.getElementById("copy");//要复制文字的节点var range = document.createRange();// 选中需要复制的节点range.selectNode(Url2);// 执行选中元素window.getSelection().addRange(range);// 执行 copy 操作var successful = document.execCommand('copy');// 移除选中的元素window.getSelection().removeAllRanges();}else{var text = document.getElementById("copy").innerText;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 = text ;// 修改文本框的内容document.body.appendChild(textarea);textarea.select()// 选中文本try { const msg = document.execCommand('copy') ?'successful' : 'unsuccessful' ;alert(msg)} catch (err) { alert('unable to copy', err) }document.body.removeChild(textarea)}
}

jsp代码

<div className='button' style={{marginTop:'1rem'}}>保存二维码到手机</div><div style={{marginTop: '0.5rem'}} className='flex'><div className='button left-button'>微信号：<span id='copy'>ZYYLAPP</span></div><div className='button right-button' onClick={()=>{this.copy()}}>复制</div>

H5移动端完美实现点击复制文本的解决方法，已经自测！相关推荐

HBuilder X右端预览点击无反应（解决方法）
可能是因为把压缩包解压到了c盘以外.本人亲测桌面解压运行顺利,放到别的盘里就不行. 原因可能跟解决打不开内置浏览器的问题(提示:[WARNING:] error : "无法加载库 ...
h5微信本地调试 vue_UniApp本地调试H5（谷歌chrome浏览器）跨域问题的解决方法，亲测可用...
UniApp本地调试H5跨域(谷歌chrome浏览器,UniApp内置浏览器不存在此问题)的推荐方案:欺骗浏览器,让浏览器觉得你没有跨域(其实还是跨域了,用的是代理) 客户器端解决方案(亲测可用): ...
TextView does not support text selection. Selection cancelled. 。TextViews复制文本失效解决方法
解决方法前人种下了种子-- android:descendantFocusability="blocksDescendants" 去掉这个属性即可
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
移动端js实现点击复制到剪贴板,带提示,[真正]兼容所有浏览器,包括安卓和ios及uc.qq.微信.手机自带等浏览器. github,欢迎star: https://github.com/majian ...
js点击复制文本 - 案例篇
文章目录 js点击复制文本 :代码+效果图效果图 · 示下: html 代码如下: 注意代码: 附:[javascript监听键盘事件 - 如表单enter回车提交](https://blog.cs ...
【前端技巧】实现点击复制文本内容方法
/*** 点击复制文本内容* * @param {String} content * * @author Outman* @date 2022-10-27*/ // [旧]利用inputElement ...
vue 给checkbox 赋值_Vue动态生成el-checkbox点击无法赋值的解决方法
前言最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的例如: 定义 ...
win10 JDK-8u231安装点击下一步没反应解决方法-JDK安装记录
先说结论:win10 JDK-8u231安装点击下一步没反应解决方法就是换安装包,最显眼的那个jdk-8u231-windows-x64.exe不能用,亲测 jdk-11.0.5_windows-x ...
移动端网页布局中需要注意事项以及解决方法总结
移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name=&qu ...

H5移动端完美实现点击复制文本的解决方法，已经自测！

H5移动端完美实现点击复制文本的解决方法，已经自测！相关推荐

最新文章

热门文章