想做一个功能,移动端上点击一个按钮,把对应div里面的内容复制到剪切板

项目中遇到一个问题。在微信中打开一个h5页面判读如果是微信就提示用户用使用分享到朋友圈的按钮。如果不是在微信中打开,希望点击按钮以后,希望能复制页面的链接地址到剪切板上。提示用户在其它浏览器中打开。

试了好几种办法。发现无法兼容。

阅读 5.2k
2 个回答
新手上路,请多包涵

点击按钮复制文本
————第三方库:官网:https://clipboardjs.com/

——1. npm install clipboard --save or import Clipboard from 'clipboard'
——2. 通过data-clipboard-target在触发器元素中添加属性来实现。在此属性中包含的值需要与另一个元素选择器匹配。
    <input id="demoInput" value="hello world">
              <button class="btn" data-clipboard-target="#demoInput" @click="copyLink">点我复制</button>
——3.在 <script>标签中加载。
    3.1:import ClipboardJS from '../../../node_modules/clipboard/dist/clipboard.min'
    3.2:写方法 copyLink ,做出相对应的响应。
    3.3:参考:https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18

————源生:document.execCommand()

——1.先获取元素:getElementById(''),p 标签的话记得要再加上 .innertext 才会获取才 value.
——2.element.select(): 选中你要复制的文本。有时候会用到 element.focus(), 因为调用element.select()不一定会集中输入,因此经常使用HTMLElement.focus()。
——3.document.execCommand('copy') 复制到粘贴板上。
——4.遇到问题:
    ——4.1不能直接使用 getEementByClassName(''),一位内获取的是一个数组,应该是 getEementByClassName('')[0],一般建议使用getElementById('')
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏