目標
實現(xiàn)點擊按鈕, 復制當前頁面的URL
實現(xiàn)方法
利用input元素的setSelectionRange方法团搞，以及document的execCommand方法救巷。
首先，將input 元素的value值設置為當前頁面的的url，（該input元素通常不應該顯示在頁面上挽懦，可以通過visibility: hidden樣式將其設置不可見）；
然后木人，利用setSelectionRange選中input元素對應范圍的內(nèi)容（此此處信柿，選中內(nèi)容即為當前頁面的url）；
最后醒第，調(diào)用execCommand方法渔嚷，調(diào)用copy命令，即可將選中的url復制到剪切板中稠曼。
注意：
- 調(diào)用setSelectionRange選擇input元素中內(nèi)容時形病，當前操作的input標簽必須屬于被選中的狀態(tài)，即focus霞幅，因此需要先調(diào)用focus方法漠吻；
具體實現(xiàn)完整代碼
<!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>
相關文檔
