簡體   English   中英

掩碼HTML密碼輸入

[英]Mask HTML password input

我確實有一個不尋常的請求,我正在開發一個應用程序,其中兩個人必須在同一屏幕上的input[type=password] 1到1000之間的隨機數 - 現在我正在尋找一種方法來隱藏多少數字已輸入密碼字段,fe

  • 人1:29 = **
  • 人2:587 = ***

我正在尋找一種始終展示****的方法

希望你們得到我的問題。

非常感謝。

UPDATE

看起來我無法描述我“需要”的內容,所以這里有一些圖片更新:

人1輸入數字32,這將如下所示: 32號

人2輸入數字325,這將如下所示: 第345號

我的目標是輸入始終如下: 期望的樣子

我只想改變字段的外觀,而不是值。

一種方法是使用change事件更新狀態變量。 這是jquery的一個例子。 (並假設始終顯示4個星號)

var entered = "";

$("#my-input").change(function() {
    var newVal = $("#my-input").val();
    if (newVal.length < 4) {
        //backspace was pressed
        entered = entered.substr(0, entered.length - 1);
    } else if (newVal.length > 4) {
        //another key was pressed
        entered += newVal.substr(4);
    }
    $("#my-input").val("****");
});

$("#my-input").val("****");

這不是萬無一失的,如果用戶選擇,復制,粘貼,它將會崩潰。 等等

雖然這會讓你得到你所要求的效果,正如其他評論所暗示的那樣,它可能不是最好的用戶體驗。

這是一個非常hacky的css方式,不確定瀏覽器支持,但不需要JavaScript!

Codepen

HTML

<div class="test">
  <span>&middot;&middot;&middot;&middot;</span>
  <input type="password" />
</div>

CSS

.test{
  position:relative;
}
.test span{
  position:absolute;
  z-index:1;
  padding:5px; /** Match the input padding **/
  font-size:2em;
  line-height:.6em
}
input{
  z-index:0;
  text-indent:-9999px; /** Hide the text typed in **/
}

它本質上只是absolute在輸入,然后通過隱藏的文本點定位text-indent

您還可以使用CSS使文本顏色與輸入字段相同:

input[type=password] {
    color: white;
}

編輯:或者像@GeraldSchneider一樣獨立於輸入顏色評論:

input[type=password] {
    color: transparent;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM