【專案心得】在微信網頁上的點選按鈕複製功能
阿新 • • 發佈：2019-02-13
這幾天做的一個h5專案，遇到了上圖的這種需求，點選按鈕複製框框裡面的內容。一開始是使用JS原生的寫法，核心語句是：
document.execCommand(“Copy”);
以及xxx.select();
但是瀏覽器一直報錯提示select() is not a function…
仔細查詢原因後，發現是由於我用div模擬了文字框的實現,但select()只能用於input框，因此修改之後可以正常複製了。然而，此方法適用於安卓系統，在ios上不起效。
程式碼如下：
function copy(){
var copyTarget = document.getElementById('copyTarget' clipboard外掛
為了相容ios系統，嘗試使用了clipboard.js。
官方網站戳這裡https://clipboardjs.com/
下面放一個官網上的點選按鈕複製div的內容的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title 關鍵是要給按鈕新增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>以上是本次專案完成過程中的小小心得，我這個前端的小菜鳥還在四處碰壁中，希望大家多多補充自己的意見噢~