如何使用 JavaScript 將副本添加到剪貼板按鈕
如何創建一個函數，在調用時接收一串文本以復製到用戶剪貼板。
開始使用
在本教程中，我們將使用 CheatCode 的全棧 JavaScript 框架 Joystick。 Joystick 將前端 UI 框架與用於構建應用的 Node.js 後端結合在一起。
首先，我們要通過 NPM 安裝 Joystick。確保在安裝之前使用 Node.js 16+ 以確保兼容性（如果您需要學習如何安裝 Node.js 或在計算機上運行多個版本，請先閱讀本教程）：
終端
npm i -g @joystick.js/cli
這將在您的計算機上全局安裝操縱桿。安裝好之後，接下來我們新建一個項目：
終端
joystick create app
幾秒鐘後，您將看到一條消息已註銷到 cd 進入你的新項目並運行 joystick start ：
終端
cd app && joystick start
在此之後，您的應用應該可以運行了，我們可以開始了。
添加操縱桿組件
在我們剛剛創建的應用程序中，在 /ui/pages/index/index.js 為我們創建了一個已經連接到我們的路由器的示例頁面組件 .首先，我們將打開這個文件並將其內容替換為一個骨架組件，我們將在該組件上構建複製到剪貼板的功能：
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
render: () => {
return `
<div>
</div>
`;
},
});
export default Index;
在這裡，我們首先導入 ui @joystick.js/ui 中的對象 包：CheatCode 的操縱桿框架的 UI 框架部分。接下來，我們創建一個變量const Index 並將其分配給對 ui.component() 的調用 .這個方法使用我們作為對像傳遞給它的選項為我們創建了一個新的 Joystick 組件。
在那個對像上，我們添加了一個屬性 render 當我們在應用程序中加載這個組件時，它被分配給返回我們想要在屏幕上呈現的 HTML 的函數。現在，我們只是返回一個帶有空 <div></div> 的字符串 標記。
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
css: `
div {
display: flex;
}
div button {
margin-left: 10px;
}
`,
render: () => {
return `
<div>
<input type="text" />
<button class="copy">Copy</button>
</div>
`;
},
});
export default Index;
構建 HTML，接下來，我們要添加一個 <input /> 帶有 type 的標籤 text 和一個帶有 class 的按鈕 copy .我們的目標是將我們輸入的任何內容輸入到輸入中，當我們單擊“複製”按鈕時，將其複製到剪貼板。在此之上，我們添加了一些簡單的 CSS 來清理我們的輸入和按鈕的顯示，使它們在屏幕上彼此相鄰。
將副本添加到剪貼板
接下來，我們需要將處理文本副本的按鈕連接到剪貼板。
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
events: {
'click .copy': (event, component) => {
const input = component.DOMNode.querySelector('input');
component.methods.copyToClipboard(input.value);
},
},
css: `...`,
render: () => {
return `
<div>
<input type="text" />
<button class="copy">Copy</button>
</div>
`;
},
});
export default Index;
為了處理複製事件，我們需要在我們的按鈕上添加一個事件監聽器，以便當它被點擊時，我們可以獲取當前輸入值，然後將其交給我們的複制函數。
在這裡，我們向組件 events 添加了一個選項 它被分配給一個對象，其中每個屬性名稱是我們要偵聽的 DOM 事件類型和我們要在 <event> <element> 上偵聽的元素的組合 .為該屬性分配一個函數，當在該元素上檢測到該事件時，我們希望操縱桿調用該函數。
對於我們的需要，我們想獲取 <input /> 的當前值 我們在 HTML 中渲染的標籤。為此，我們預計 Joystick 會將發生的原始 DOM 事件作為函數的第一個參數傳遞給我們，並將當前組件實例作為第二個參數傳遞給我們。
在這種情況下，操縱桿讓我們可以訪問當前組件，因為它在瀏覽器中的 component.DOMNode 處呈現 .這是一個普通的 JavaScript DOM 節點對象，這意味著我們可以對其執行任何標準的 JavaScript 方法。在這裡，我們調用 querySelector() 說“在這個元素內——component.DOMNode — 查找名為 input 的元素 。”
有了這個元素，接下來，我們調用 component.methods.copyToClipboard() 傳入 value 我們的 input 的屬性 （這將包含當前輸入中的文本值）。
我們的最後一步是連接那個 methods.copyToClipboard() 使這項工作發揮作用的功能。
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
const Index = ui.component({
methods: {
copyToClipboard: (text = '') => {
const textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
},
},
events: {
'click .copy': (event, component) => {
const input = component.DOMNode.querySelector('input');
component.methods.copyToClipboard(input.value);
},
},
css: `...`,
render: () => {
return `
<div>
<input type="text" />
<button class="copy">Copy</button>
</div>
`;
},
});
export default Index;
這是重要的部分。在 Joystick 組件上，我們可以在 methods 下定義我們想要的任意函數 目的。在這裡，我們添加了 copyToClipboard() 作為這些方法之一（“方法”只是 JavaScript 中定義在對像上的函數的專有名稱），接受 text 字符串 （這裡是我們剛剛從輸入中提取的值，但可能是我們想要復製到剪貼板的任何字符串）。
由於 JavaScript 缺少原生的“複製到剪貼板”功能，為了實現這一點，我們需要做一些小改動。
在這個函數內部，首先我們要動態創建一個<textarea></textarea> 內存中的元素。接下來，我們分配那個 textarea 的值 text 的元素 我們傳入 copyToClipboard() .設置好後，我們會動態附加 textarea 到 <body></body> 我們瀏覽器的標籤，然後立即調用 .select() 方法就可以了。
接下來，我們使用 document.execCommand() 傳遞字符串 "copy" 的函數 告訴瀏覽器執行複制命令，該命令會將瀏覽器中當前選擇的內容複製到剪貼板。最後，我們調用 document.body.removeChild(textarea) 刪除 <textarea></textarea> 我們剛剛注入。
而已！現在，如果我們在瀏覽器中打開我們的應用程序 http://localhost:2600 ，當我們點擊我們的按鈕時，我們輸入的當前值將被傳遞給 methods.copyToClipboard() 並自動複製到剪貼板。
總結
在本教程中，我們學習瞭如何創建一個簡單的函數來將文本複製到剪貼板。我們學習瞭如何使用操縱桿連接一個簡單的 UI 組件，然後在單擊按鈕時將輸入的當前文本複製到剪貼板。
