Изменение символов в поле пароля в HTML

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

27
html input passwords

6 ответов

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

30

создайте свой собственный шрифт и используйте @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С)

21

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

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

4

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

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

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

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

3

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

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

надеюсь, что это помогает!

0