一键复制链接

目标

实现点击按钮, 复制当前页面的URL

实现方法

利用input元素的setSelectionRange方法,以及document的execCommand方法。
首先,将input 元素的value值设置为当前页面的的url,(该input元素通常不应该显示在页面上,可以通过visibility: hidden样式将其设置不可见);
然后,利用setSelectionRange选中input元素对应范围的内容(此此处,选中内容即为当前页面的url);
最后,调用execCommand方法,调用copy命令,即可将选中的url复制到剪切板中。

注意:

  1. 调用setSelectionRange选择input元素中内容时,当前操作的input标签必须属于被选中的状态,即focus,因此需要先调用focus方法;

具体实现完整代码




  
  
  
  Document


  

点击复制后在右边textarea CTRL+V看一下

相关文档

execCommand相关文档

setSelectionRange相关文档

一键复制链接_第1张图片

CanIUse-setSelectionRange

一键复制链接_第2张图片

CanIUse-execCommand

你可能感兴趣的:(一键复制链接)