這幾天做的一個h5項目，遇到了上圖的這種需求，點擊按鈕複製框框裏面的內容。一開始是使用JS原生的寫法，核心語句是：
document.execCommand(“Copy”);
以及xxx.select();
但是瀏覽器一直報錯提示select() is not a function…
仔細查找原因後，發現是由於我用div模擬了文本框的實現,但select()只能用於input框，因此修改之後可以正常複製了。然而，此方法適用於安卓系統，在ios上不起效。
代碼如下：
function copy(){
var copyTarget = document.getElementById('copyTarget');
copyTarget.select();
document.execCommand("Copy");
}clipboard插件
爲了兼容ios系統，嘗試使用了clipboard.js。
官方網站戳這裏https://clipboardjs.com/
下面放一個官網上的點擊按鈕複製div的內容的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
關鍵是要給按鈕添加data-clipboard-action=”xxx”以及 data-clipboard-target=”xxx”,data-clipboard-target最好等於目標複製對象的類名。
此方法可以兼容ios系統，然而在安卓上又失效了。。。
同時兼容iOS以及Android
綜上所述，要兼容這兩大系統，同時使用JS原生的方法以及clipboard.js插件即可。
input框的優化
用戶不能編輯input裏面的內容，因此可以添加readonly=”readonly”屬性，同時爲了防止手機輸入框的彈出，可以添加onclick=”this.blur();”，使輸入框失去焦點。
示例：
<input type="text" class="className" id="idName" value="要複製的內容" readonly="readonly" onclick="this.blur();"></input>以上是本次項目完成過程中的小小心得，我這個前端的小菜鳥還在四處碰壁中，希望大家多多補充自己的意見噢~