學習過程紀錄:開發按按鈕後可以把文字複製到剪貼簿的功能

更新於 發佈於 閱讀時間約 2 分鐘

緣起

在alpha camp的學習終於來到第二學期的最後,在寫期末考作業時需要將產生的新網址,透過按按鈕就能直接複製,而沒有做過這個功能的我當然是毫無頭緒......。

過程

沒頭緒時,當然是在google上開始搜尋,「how to copy by press button?」,沒錯,通常我就是這麼直接的輸入自己的困惑,然後就找到相關網頁(https://www.geeksforgeeks.org/how-to-create-copy-to-clipboard-button/),裡面有提供語法給我,也就是「navigator.clipboard.writeText( <text> )」,但是根據之前開發的經驗,我知道不能直接在使用node.js開發時,於javascript內用document.querySelecotor去選取要複製的文字,所以下一個問題是「要如何在node.js上開發時,選取想複製的文字並放入navigator.clipboard.writeText( <text>)的text內執行?」

解決

後來看到上述網頁在下面有範例可參考,於是看到可以直接在寫HTML時用<script>標籤,將想執行的程式碼寫入,此時就能用document.querySelecotor去成功選取想複製的文字,最後就成功做出此功能,也學到了<script>的用法!




留言
avatar-img
留言分享你的想法!
avatar-img
林采婷的沙龍
0會員
4內容數
林采婷的沙龍的其他內容
2023/11/15
作為全職工作的人,只能利用下班時間去學習,也想過是否離職全職學習,可是評估過自己的經濟壓力,還是決定繼續工作,另一部分也是因為尚未確認是否要將軟體工程當成下一份工作的目標。 因為非本科生,加上學習時間有限,從學期一到三的進度對我來說真的都很有壓力,這部分也是期待alphacamp有機會能去調整
2023/11/15
作為全職工作的人,只能利用下班時間去學習,也想過是否離職全職學習,可是評估過自己的經濟壓力,還是決定繼續工作,另一部分也是因為尚未確認是否要將軟體工程當成下一份工作的目標。 因為非本科生,加上學習時間有限,從學期一到三的進度對我來說真的都很有壓力,這部分也是期待alphacamp有機會能去調整
2023/08/11
選擇此專案的原因   現在人奢侈花費變多,常常到月底回想不起自己金錢的去向,因而產生無止境的焦慮,因此希望做一個精簡的記帳專案,讓大家可以輕鬆地記錄自己的支出,還能檢視不同類別的花費以做開銷調整。 使用的技術 用express-handlebars作為此專案的引擎樣板,並搭配connect-f
2023/08/11
選擇此專案的原因   現在人奢侈花費變多,常常到月底回想不起自己金錢的去向,因而產生無止境的焦慮,因此希望做一個精簡的記帳專案,讓大家可以輕鬆地記錄自己的支出,還能檢視不同類別的花費以做開銷調整。 使用的技術 用express-handlebars作為此專案的引擎樣板,並搭配connect-f
2023/04/29
學習成果 了解了javascript內array和object的結構,以及簡單的語法,接著學到了如何自己撰寫函式;而在HTML和CSS的部分,習得position的分類和使用方式,以及bootstrap;此外,學會用javascript操弄DOM以動態修改網頁內容,並設置監聽器達成想要有的特定功能
2023/04/29
學習成果 了解了javascript內array和object的結構,以及簡單的語法,接著學到了如何自己撰寫函式;而在HTML和CSS的部分,習得position的分類和使用方式,以及bootstrap;此外,學會用javascript操弄DOM以動態修改網頁內容,並設置監聽器達成想要有的特定功能
看更多
你可能也想看
Thumbnail
本篇教學將教你如何建立和使用 textbutton,讓你可以使用文字快速建立玩家可以點擊的按鈕,並提供瞭如何更改按鈕文字和自訂點擊按鈕後的動作。
Thumbnail
本篇教學將教你如何建立和使用 textbutton,讓你可以使用文字快速建立玩家可以點擊的按鈕,並提供瞭如何更改按鈕文字和自訂點擊按鈕後的動作。
Thumbnail
C2 開始終於使用到 visual studio code, 這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構, 每天都在 coding,每週都在追進度, 用壓縮到極致的時間寫完作業, 但跟著課程內容寫程式碼,真的有學到嗎? 有,吧。 畢竟在寫最後的電影清單
Thumbnail
C2 開始終於使用到 visual studio code, 這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構, 每天都在 coding,每週都在追進度, 用壓縮到極致的時間寫完作業, 但跟著課程內容寫程式碼,真的有學到嗎? 有,吧。 畢竟在寫最後的電影清單
Thumbnail
現今,知道如何學習並有效地紀錄和整理重要資訊,是每位新生代必備的技能。先前已經介紹了 Notion Web Clipper 和 Save to Notion 兩個工具,而在這篇文章中,我們將介紹 Klippper 網站,一款能夠幫助我們更精確地紀錄關鍵資訊,並將其整合進 Notion 的工具。
Thumbnail
現今,知道如何學習並有效地紀錄和整理重要資訊,是每位新生代必備的技能。先前已經介紹了 Notion Web Clipper 和 Save to Notion 兩個工具,而在這篇文章中,我們將介紹 Klippper 網站,一款能夠幫助我們更精確地紀錄關鍵資訊,並將其整合進 Notion 的工具。
Thumbnail
現今數位世代,資訊匯流如潮水般湧入,如何有效地整理、保存網頁上有用內容成為許多人的挑戰。如果你像我喜歡使用 Notion 來管理你的工作和生活,那麼 Notion Web Clipper 將會是你無法或缺的強大工具。它能夠將任何網頁內容輕鬆儲存至 Notion,讓你能更便捷地閱讀、註記、保存和分享。
Thumbnail
現今數位世代,資訊匯流如潮水般湧入,如何有效地整理、保存網頁上有用內容成為許多人的挑戰。如果你像我喜歡使用 Notion 來管理你的工作和生活,那麼 Notion Web Clipper 將會是你無法或缺的強大工具。它能夠將任何網頁內容輕鬆儲存至 Notion,讓你能更便捷地閱讀、註記、保存和分享。
Thumbnail
我尋找有沒有可以自動將Kobo畫線內容導入到Notion的方法,找到了某個網站也有跟我同樣的困擾,原本以為按照他的步驟一步一步就可以完成了,但卻還是在途中遇到困難,再經歷一次次將問題丟掉GPT尋求解答後,我想可以將更多這個網站可能比較沒有提到的部份以及我遇到的問題分享給大家。
Thumbnail
我尋找有沒有可以自動將Kobo畫線內容導入到Notion的方法,找到了某個網站也有跟我同樣的困擾,原本以為按照他的步驟一步一步就可以完成了,但卻還是在途中遇到困難,再經歷一次次將問題丟掉GPT尋求解答後,我想可以將更多這個網站可能比較沒有提到的部份以及我遇到的問題分享給大家。
Thumbnail
要可以寫出這個程式,我們首先必須要知道如何輸出字串到螢幕,以及知道要如何拿到使用者輸入的名字。 現在我們就來學習兩個python的內建函數print()和input()
Thumbnail
要可以寫出這個程式,我們首先必須要知道如何輸出字串到螢幕,以及知道要如何拿到使用者輸入的名字。 現在我們就來學習兩個python的內建函數print()和input()
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News