如何僅使用 CSS 將文字輸入欄位轉換為密碼欄位？

如何只使用CSS 讓輸入欄位看起來像密碼欄位

在Web 開發中，有時需要顯示文字輸入欄為密碼欄，隱藏字符，保證用戶隱私。這可以完全透過 CSS 來實現，甚至無需修改 HTML 或使用 JavaScript。

CSS 解決方案：

將文字輸入欄位轉換為類似密碼的欄位CSS 提供了一個名為-webkit-text-security（或text-security）的實驗性選擇器。此選擇器控制輸入欄位的視覺外觀，並可用於設定文字輸入的顯示安全性。

實作：

要使用此解決方案，請應用-將webkit-text-security 或text-security 選擇器新增至所需的輸入字段，並將值設定為disk 或其他所需的字元。以下是一個範例：

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

用法：

要在文字和密碼欄位之間切換顯示，您可以在表單中新增一個按鈕並使用JavaScript 來從輸入欄位新增或刪除pw 類別。

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>

瀏覽器相容性：

現代瀏覽器支援 -webkit-text-security 選擇器，例如Chrome、Safari 和 Opera。對於 IE8 支持，您可以使用文字安全選擇器。

附加說明：

此解決方案主要影響視覺呈現，並且不會阻止複製/貼上功能預設。但是，您可以在 CSS 或 JavaScript 中實作其他措施來限制從輸入欄位複製和貼上。

以上是如何僅使用 CSS 將文字輸入欄位轉換為密碼欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！