密碼顯示輸入

在 HTML 中，有一個非常明確的輸入類型來處理密碼：

如果你使用它，你會在輸入時得到省略號，比如：

????????

這就是網(wǎng)站試圖幫助提高安全性。如果它沒有這樣做，那么典型的問題是有人可能會從你的肩膀上窺視，窺探你正在輸入的內(nèi)容。

但是交互已經(jīng)發(fā)生了一些變化，并且更常見的選項是：

?? 顯示密碼？

我認為這個想法是我們應(yīng)該有一個選擇。我們大多數(shù)人都可以快速觀察一下，看看是否有窺探，如果沒有，我們可能會選擇透露我們的密碼，這樣我們就可以確保我們輸入正確并且不會因為輸入錯誤而遭受痛苦。

所以！該怎么辦？

方式 1：使用 type="password"，然后將其替換為?type="text"， 使用 JavaScript 處理適用于所有瀏覽器。

const input = document.querySelector(".password-input");// When an input is checked, or whatever...if (input.getAttribute("type") === "password") {  input.setAttribute("type", "text");} else {  input.setAttribute("type", "password");}

方式 2：-webkit-text-security 在 CSS 中使用

有人希望將 JavaScript 功能移至 CSS，但這不是一個最佳的選擇，因為它確實適用于某些瀏覽器，有兼容問題。

input[type="password"] {  -webkit-text-security: square;}form.show-passwords input[type="password"] {  -webkit-text-security: none;}

方式 3：在 CSS 中使用 input-security

輸入安全有一個 Editor's Draft 規(guī)范。它基本上是一個可以修改的值。

form.show-passwords input[type="password"] {  input-security: none;}

這個方式比較簡單，但目前還沒有任何瀏覽器支持它。所以，我們現(xiàn)在只能使用方式1。