目标
实现点击按钮, 复制当前页面的URL
实现方法
利用input元素的setSelectionRange方法，以及document的execCommand方法。
首先，将input 元素的value值设置为当前页面的的url，（该input元素通常不应该显示在页面上，可以通过visibility: hidden样式将其设置不可见）；
然后，利用setSelectionRange选中input元素对应范围的内容（此此处，选中内容即为当前页面的url）；
最后，调用execCommand方法，调用copy命令，即可将选中的url复制到剪切板中。
注意：
- 调用setSelectionRange选择input元素中内容时，当前操作的input标签必须属于被选中的状态，即focus，因此需要先调用focus方法；
具体实现完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var inputText = document.getElementById('inputText');
inputText.focus();
inputText.value = location.href;
inputText.setSelectionRange(0, inputText.value.length);
document.execCommand('copy', true);
});
</script>
</body>
</html>
相关文档
网友评论