Mask HTML password input

Question

У меня есть необычный запрос, я работаю над приложением, в котором два человека должны ввести случайное число от 1 до 1000 в input[type=password] на том же экране - теперь я ищу способ скрыть сколько чисел было введено в поле пароля, fe

• Person 1: 29 = **
• Люди 2: 587 = ***

Я ищу способ, чтобы всегда показывать ****

Надеются, что вы, ребята, вопрос мой.

Большое спасибо.

UPDATE

Похоже, я был не в состоянии описать то, что я «нужно», так вот это обновление с некоторыми картинами:

Person 1 входит в число 32, то это будет выглядеть следующим образом :

Человек 2 входит в число 325, это будет выглядеть следующим образом:

Моя цель состоит в том, что вход всегда выглядит так:

Я просто хочу изменить внешний вид поля, а не значение.

Answer 1

Heres довольно 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

Answer 2

Один из способов сделать это - обновить переменную состояния, используя событие изменения. Вот пример с 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("****"); 

Это не является надежным, он сломается, если пользователь выбирает, копию, пасту. и т. д.

Хотя это даст вам эффект, о котором вы просили, как намекают другие комментарии, это может быть не лучший пользовательский опыт.

Answer 3

Вы также можете использовать CSS, чтобы сделать цвет текста так же, как поле ввода:

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

Edit: Или быть независимым от входного цвета, как @GeraldSchneider прокомментировал:

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