Как изменить звездочки пароля на символы
Перейти к содержимому

Как изменить звездочки пароля на символы

  • автор:

Как реализовать звездочки вместо кружочков, при вводе в input type=»password»? Или как сделать шрифт в котором все символы выглядят как звездочки?

Если ли тут шрифтоделы? Можно ли скрафтить шрифт, в котором все символы выгледят как один(звездочка)? — в голову приходит только такая реализация задачи, из input type=»password» делаем обычный type=»text» и ставим ему шрифт. Проблема в том что я понятия не имею как собирают шрифты, куда копать?

  • Вопрос задан более трёх лет назад
  • 2971 просмотр

15 комментариев

Средний 15 комментариев

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS
Алёша @GIBRID21 Автор вопроса
Ярослав Иванов, Спишу это на то что сейчас поздний час и ты устал. Не надо чушь разводить.

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS

Алёша, Хочешь звездочек так используй а через JS делай подмену символов. Шрифт еще какой-то собрался создавать. Сам-то не устал ?

Алёша @GIBRID21 Автор вопроса

Ярослав Иванов, «Решил передавать пароли в явном виде». Т.е. текст введенный в type=»password» зашифровывается?)

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS
Алёша, Ты не можешь создать два инпута и копировать во второй значения ?
Алёша @GIBRID21 Автор вопроса

Ярослав Иванов, Это не элегантно. Ясен куй что эту задачу можно реализовать 100500 разными способами.

Алёша @GIBRID21 Автор вопроса

Ярослав Иванов, Я хотел спросить у тех кто знаком с крафтингом шрифта, можно ли приколхозить такой шрифт.

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS
Алёша @GIBRID21 Автор вопроса
Ярослав Иванов, jq фууууууу

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

Решил передавать пароли в явном виде». Т.е. текст введенный в type=»password» зашифровывается?

Здрасте, я ваша тётя.
Пароли и так передаются в «явном виде».
Если установлен сертификат, то шифруются все данные, не только пароли.
Непонятно, что вы имели ввиду.

Алёша @GIBRID21 Автор вопроса
Сергей, Вот это чудо(@space2pacman) мне написало:

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

Потом удалил. Я подзавис тогда.

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
Алёша, https://jsfiddle.net/wg9c3nrb/7/ вот. но тут проблема с видимостью курсора )
Алёша @GIBRID21 Автор вопроса

Сергей, Да лол, я и сам могу это написать. ЭТО НЕ ЭЛЕГАНТНО. Я хотел с шрифтом поигратья :'(. Но паходу проще через js делать.

Алёша @GIBRID21 Автор вопроса
Сергей, Я смотрю ты действительно тут ночуешь)

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
Алёша, Это только так кажется. Я только что проснулся =)
Решения вопроса 1

Есть онлайн-генераторы (например, этот) или FontForge. Там все интуитивно понятно.
Только не надо делать type=text, это не безопасно, используйте type=password, просто укажите для него шрифт, в котором заменены нужные символы (не только звездочка, в разных браузерах по-разному). И если что-то пойдет не так — будут стандартные для браузера звездочки/кружочки.
Любые варианты с JS — однозначно нет. Вообще, разработчков, модифицирующих содержимое инпутов на лету — гнать ссаными тряпками из профессии. Инпут должен работать только read-only.

Ответ написан более трёх лет назад
Алёша @GIBRID21 Автор вопроса

Только не надо делать type=text, это не безопасно

Собственно, чем это не безопастно?

Алёша, Ничего критичного, просто если ваш шрифт не загрузится, пароль придется вводить в открытом виде. Скорее, это сильно смутит и озадачит пользователя. Я бы не стал вводить пароль в такое поле..
Всегда учитывайте, что шрифт может не подгрузиться, JS может сломаться. Базовая функциональность должна работать без всего этого. А маскировка пароля — это базовая функциональность.

Алёша @GIBRID21 Автор вопроса
maxfox, Можно вставить шрифт инлайново прямо в документе base64

А еще — браузеры могут запоминать данные, введенные в текстовые поля. И потом их предлагать для ввода. Если браузер предложит для ввода пароль в открытом виде — это тоже не очень круто.

Алёша @GIBRID21 Автор вопроса

maxfox, Спс, фонтелло помог, как я сразу об этом не подумал. Тип инпута на текст менять не нужно. Просто ставишь ему шрифт и это работает. А то тут мне предлогали дичь, использовать js и так далее. А ты красава. Спс.

Алёша, Да, можно. А еще можно отрисовать кастомный инпут через canvas и выводить котят вместо кружочков. 🙂 Зачем все это, если можно сделать шрифт с 5-10 символами как нормальный progressive enhancement?

Курсы javascript

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

30.09.2017, 22:16
Регистрация: 01.12.2016
Сообщений: 3,650
30.09.2017, 22:28
Новичок на форуме
Регистрация: 30.09.2017
Сообщений: 3

LinaInverse,
спасибо за ответ, но не получается — я пробовал вставлять этот код перед формой, а также вот в таком виде:

Но не работает. Что я делаю не так?

j0hnik,
type=»password» не подходит — любой браузер начинает ругаться, что сайт не защищен, вводить пароль опасно и т.д. и т.п.

30.09.2017, 22:37
Регистрация: 01.12.2016
Сообщений: 3,650
получите бесплатный SSL сертификат «Letsencrypt» и забудьте о проблеме на 3 мес. займет 10-15 минут.
30.09.2017, 22:40
Интересующийся
Регистрация: 01.07.2017
Сообщений: 10

    Document       

так она будет менять на звезды символы и затрет настоящий пароль

30.09.2017, 22:48
Новичок на форуме
Регистрация: 30.09.2017
Сообщений: 3

LinaInverse,
Спасибо, все получилось.

j0hnik,
Спасибо, попробую с этим разобраться.

21.11.2019, 12:01
Новичок на форуме
Регистрация: 21.11.2019
Сообщений: 1

    Document       

Подскажите пожалуйста как тюнингануть данный скрипт.
Надо чтобы он не все символы закрывал, а только первые 4.
Буду рад любой информации. Спасибо!

Как прятать пароль под звездочками?

введите сюда описание изображения

Подскажите, как при вводе пароля отображать звездочки **** вместо вводимых символов? Желательно, чтобы звездочки были с таким же размером как и шрифт.

Отслеживать
задан 21 июн 2017 в 3:49
523 7 7 серебряных знаков 24 24 бронзовых знака
ассоциация:stackoverflow.com/q/2555984/1548895
21 июн 2017 в 7:06

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

У textBox есть свойство UseSystemPasswordChar , сделайте true или если Вы хотите произвольный символ, воспользуйтесь свойством PasswordChar . Из программного кода:

textBox1.UseSystemPasswordChar = true; 
textBox1.PasswordChar = '*'; 

Отслеживать
ответ дан 21 июн 2017 в 4:00
2,245 1 1 золотой знак 10 10 серебряных знаков 21 21 бронзовый знак
Спасибо! и за способ с произвольным символом.
21 июн 2017 в 4:30

  • c#
  • .net
  • winforms
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.5.3.8609

Как написать слово в поле для пароля так, что бы его было видно?

Сейчас стало очень модно делать формы, в которых заголовок поля для ввода написан в самом поле. Например так:

Но как в таком случае быть с полем для ввода пароля? Ведь он заменяет дефолтное значение на звездочки.
В этом посте я решил рассмотреть несколько вариантов, как сделать поле для пароля со звездочками, но что бы слово «пароль» было видно.

Понятно, что без JS тут не обойтись. Сразу же извиняюсь за такой JavaScript — очень давно пишу исключительно с использованием JQuery, и на чистом JS писать довольно трудно )

Пример нашей формы

* This source code was highlighted with Source Code Highlighter .

1. Замена type

Решение, которое приходит в голову самым первым. Просто менять type у инпута при установке фокуса и снятии. Начало кода получается примерно таким:

window.onload = function () window. document .getElementById( ‘authFormInputPass’ ).onfocus = function () this .setAttribute( «type» , «password» );
>
>

* This source code was highlighted with Source Code Highlighter .

Но начав проверять это в разных браузерах сталкиваемся с тем, что этот код понимают все, но не IE. Печально. Отметаем, думаем дальше.

2. Подмена инпутов

Почему бы нам рядом с инпутом для пароля рядом не положить инпут с текстом и по очереди менять их?
Наша форма будет выглядеть так:

* This source code was highlighted with Source Code Highlighter .

Ко всему этому делу у нас цепляется следующий JavaScript код:

window.onload = function () var authFormInputPass = document .getElementById( ‘authFormInputPass’ );
var authFormInputPassT = document .getElementById( ‘authFormInputPassT’ );

authFormInputPassT.onfocus = function () authFormInputPassT.className= «authFormInput authFormInputPass hidden» ;
authFormInputPass.className= «authFormInput authFormInputPass visible» ;
authFormInputPass.focus();
>

authFormInputPass.onblur = function () if (!authFormInputPass.value) authFormInputPass.className= «authFormInput authFormInputPass hidden» ;
authFormInputPassT.className= «authFormInput authFormInputPass visible» ;
>

* This source code was highlighted with Source Code Highlighter .

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

3. Картинка!

Если вас напрягает два инпута, мы можем попробовать следующий вариант: сделать для инпута с паролем бэкгарунд на котором написано слово «Пароль», а затем менять класс у инпута.
Вот такой станет наша форма:

* This source code was highlighted with Source Code Highlighter .

На все это вешаем вот такой вот JavaScript:

window.onload = function () var authFormInputPass = document .getElementById( ‘authFormInputPass’ );

authFormInputPass.onfocus = function () authFormInputPass.className= «authFormInput authFormInputPass» ;
>

authFormInputPass.onblur = function () if (!authFormInputPass.value) authFormInputPass.className= «authFormInput authFormInputPass noPass» ;
>

* This source code was highlighted with Source Code Highlighter .

Тоже замечательно работает, нигде ничего не прыгает, запоминалки работают на ура.
Баги:
1. Разный рендеринг шрифтов в разных браузерах и ОС. Может получится так, что картинка с текстом «Пароль» будет выглядеть несколько иначе, чем весь основной текст на странице.
2.Пользователи, которые работают в Интернет с выключенными картинками. Но процент таких людей невероятно мал, да я думаю, они догадаются, что следующее поле после поля для логина — поле для пароля.

Кстати, на картинке в начале топика это реализовано именно таким методом.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *