Изменение символов, отображаемых в поле пароля HTML

Ответ 1

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

Ответ 2

Создайте свой собственный шрифт и используйте @font-face и font-family (и font-size) для input[type="password"]. Это должно помочь решить вашу проблему. Но... вы должны создать шрифт с замененным символом bullet и asterisk. Все номера символов в шрифте могут представлять один и тот же символ. Используйте Google, чтобы найти бесплатную программу для редактирования векторных шрифтов.

Никогда не говори "невозможно". Вы должны найти хак для своей проблемы.

Символы, которые нужно заменить на ваш символ (для Chrome, Firefox и MSIE): 26AB, 25E6, 25CF, 25D8, ​​25D9, 2219, 20F0, 2022, 2024, 00B7, 002A.

(18С)

Ответ 3

Нет - пользовательский агент выбирает свой собственный стиль по умолчанию, и, насколько мне известно, нет атрибутов CSS, которые вы можете изменить, чтобы определить маскирующий символ.

Конечно, это было бы возможно, если поле пароля было просто стандартным текстовым полем, и вы вручную замаскировали вход с помощью обработчика событий javascript (возможно, onKeyPress). Вы даже можете объявить поле как type="password" в HTML, а затем изменить JOM-функцию DOM, чтобы изменить ее тип. Хотя я бы немного насторожился об этом; реализация браузера почти наверняка довольно прочная, и обход установленных функций безопасности для собственного использования редко является хорошей идеей.

Ответ 4

На данный момент похоже, что это возможно в браузерах webkit. См. http://help.dottoro.com/lcbkewgt.php для примеров и документации.

Не применяется к вводу пароля

<input type="text" style="-webkit-text-security: square;" />

Ответ 5

<input type="text" style="-webkit-text-security: circle;" />

Ответ 6

Я знаю, что это очень старый вопрос, но я столкнулся с этой проблемой сегодня, и я решил ее, используя этот подход: https://github.com/Mottie/input-password-bullet

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

@font-face {
    font-family: 'fontello';
    src: url('/fonts/fontello.eot');
    src: url('/fonts/fontello.eot') format('embedded-opentype'),
    url('/fonts/fontello.woff') format('woff'),
    url('/fonts/fontello.ttf') format('truetype'),
    url('/fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    color: red;
    font-size: 16px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

    /* add spacing to better separate each image */
    letter-spacing: 2px;
}