HTML

[HTML][JS] 如何透過點擊顯示一段隱藏的文字

今天要記錄的，是如何透過點擊一段文字來顯示另一段『隱藏起來的文字』。實作的方法非常單純，是事先設定好 <style> 中的 visibility 屬性，並透過 javascript 的腳本來進行切換。

實作方法真的非常簡單，可以直接看下方的範例程式碼。

最近接案時遇到了一個在網頁上動態新增元素的需求：我需要在資料庫後端撈取資料，按照資料的筆數新增同樣數量的元件顯示在 HTML 的頁面上。

過去我曾經簡單研究過在 HTML 中如何使用 Javascript 進行『字串』的剪貼，但當時找到的方法大部分都是：

在 HTML 當中，我一直很想要撰寫一個複製某個『區塊』文字的按鈕，這能很好地幫助我正在開發的某個專案。故此，今天研究了一下，順手紀錄了起來。

今天要紀錄的是在撰寫 HTML 當中，如何隱藏區塊。之所以想要製作這個功能，純粹是因為我想要撰寫一個『複製』文字的功能，但是這個『文字』的部份不打算顯示在頁面上。

在使用 HTML 撰寫網頁頁面時，如有需要在 HTML 當中嵌入另外一個 HTML 網頁，可以使用 “iframe” 標籤來完成此一功能。

最近找了很久如何將自己寫的 HTML 頁面展示在 WordPress 的部落格當中，並實際測試了幾個方法，目前將比較簡易的方法記錄下來，好讓自己之後同樣可以使用這套法。

使用一個『輸入框』、一個『按鈕』，一個文字元件——然後在點擊按鈕時將輸入框中的文字顯示在文字元件上，這件單純的工作幾乎是互動界面的 Hello World 一般，可以在每次使用不同的框架寫界面時都先測試看看。

在 HTML 區塊當中，如果想要讓使用者輸入文字，通常會使用 input 的文本輸入框。但如果今天我們要讓使用者可以輸入較長的字串，比如說一整段的文字，那麼，也許我們也可以考慮使用 textarea。

[註：當初寫下這篇文章時的語法適用於當初的版型，如今更迭過幾次版本，可能會在當前版型的展示出現 BUG]