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

Question

[Алёша]

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

Comments

[Ярослав Иванов]

https://stackoverflow.com/questions/1648665/changi...

[Алёша]

Ярослав Иванов, Спишу это на то что сейчас поздний час и ты устал. Не надо чушь разводить.

[Ярослав Иванов]

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

[Алёша]

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

[Ярослав Иванов]

Алёша, Ты не можешь создать два инпута и копировать во второй значения ?

[Алёша]

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

[Алёша]

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

[Ярослав Иванов]

Алёша, https://jsfiddle.net/space2pacman/wg9c3nrb/

[Алёша]

Ярослав Иванов, jq фууууууу

[Сергей delphinpro]

Алёша,

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

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

[Алёша]

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

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

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

[Сергей delphinpro]

Алёша, https://jsfiddle.net/wg9c3nrb/7/ вот. но тут проблема с видимостью курсора )

[Алёша]

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

[Алёша]

Сергей, Я смотрю ты действительно тут ночуешь)

[Сергей delphinpro]

Алёша, Это только так кажется. Я только что проснулся =)

Answer 1

[maxfox]

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

Comments

[Алёша]

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

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

[maxfox]

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

[Алёша]

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

[maxfox]

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

[Алёша]

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

[maxfox]

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

[maxfox]

Алёша, Всегда пожалуйста, главное что ты не стал городить огород и сделал все правильно!