首頁 > web前端 > css教學 > 如何僅使用 CSS 將文字輸入欄位轉換為密碼欄位?

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

DDD
發布: 2024-10-31 12:24:02
原創
690 人瀏覽過

How to Transform a Text Input Field into a Password Field Using Only 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板