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

更新於 發佈於 閱讀時間約 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
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
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()
Thumbnail
在開始撰寫程式前,我們必須先熟悉我們所使用的環境究竟有哪些常用功能,這樣往後在撰寫程式時較容易上手,廢話不多說,我們開始介紹吧!!
Thumbnail
在開始撰寫程式前,我們必須先熟悉我們所使用的環境究竟有哪些常用功能,這樣往後在撰寫程式時較容易上手,廢話不多說,我們開始介紹吧!!
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News