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

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

33 голосов
/ 30 октября 2009

Есть ли способ изменить звездочки (*) или в некоторых браузерах маркер (•), который появляется в полях пароля в HTML?

Ответы [ 6 ]

36 голосов
/ 30 октября 2009

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

33 голосов
/ 24 июля 2017

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

Никогда не говори "невозможно". Ты должен найти способ решить свою проблему.

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

(18C)

4 голосов
/ 03 января 2016

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

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

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

Нет хорошего решения для других браузеров, так как на момент написания этого ответа, и даже в браузерах webkit, символы, которые вы можете указывать, очень ограничены.

4 голосов
/ 30 октября 2009

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

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

3 голосов
/ 28 февраля 2018 

<input type="text" style="-webkit-text-security: circle;" />
2 голосов
/ 31 июля 2018

Я знаю, что это очень старый вопрос, но я столкнулся с этой проблемой сегодня, и я решил ее, используя этот подход: 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;
}

Надеюсь, это поможет!

...