Получить тип ввода = текст, который будет выглядеть как type = password

TL;DR

У меня есть вход с type=text, который я хочу показать звездам как вход с type=password, используя только CSS.

В принципе у меня есть форма со следующим вводом:

<input type='text' value='hello' id='cake' />

Я не создаю форму, у меня вообще нет доступа к ее HTML. Однако у меня есть доступ к CSS, который применяется к странице.

Я бы хотел, чтобы он вел себя как type=password, то есть - показывать звезды для того, что пользователь вводил, а не набираемый текст. В принципе, я бы хотел, чтобы этот аспект (презентация ввода пользователя) выглядел как поле type=password.

Поскольку это кажется проблемой только для презентации, я решил, что для этого нужно использовать CSS, поскольку он находится в области ответственности. Однако - я так не нашел. Я должен поддерживать IE8 +, но я бы предпочел иметь решение, которое работает для современных браузеров только без какого-либо решения. Дополнительные пункты для предотвращения копирования/вставки, но я могу жить без этого.

Примечание: Если это не ясно, я не могу добавить HTML или JavaScript на страницу - только CSS.

(Единственное, что я нашел, это этот вопрос, но он касается проблемы, связанной с jQuery, и у нее есть решение для JavaScript)

Ответы

Ответ 1

Ну как @ThiefMaster предложил

input.pw {
    -webkit-text-security: disc;
}

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

Используйте любую утилиту для редактирования шрифтов, например FontForge, чтобы создать шрифт со всеми символами * (или любым символом, который вы хотите). Затем используйте веб-шрифты CSS, чтобы использовать их в качестве настраиваемого шрифта.

Ответ 2

Вы можете создать шрифт , сделанный только из точек

@font-face
    {
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}

Это может быть то, что вы ищете...

Есть много глифов, которые можно определить, но может быть более простой способ сделать это. Вы можете создать абсолютно пустой шрифт и определить только глиф .notdef (идентификатор глифа 0), который используется в качестве замены, когда другой глиф не определен

Как вы, наверное, знаете, обычно выглядит так: missing glyph icons

Итак, вы должны заменить его точкой/звездочкой и проверить, что происходит с браузерами... потому что я не уверен, что он работает над всеми из них (некоторые могут захотеть использовать свою замену отсутствующего глифа). Дайте мне знать, если вы попробуете...

НТН

Ответ 3

В браузерах на основе WebKit вы можете сделать это, используя свойство -webkit-text-security. Он даже позволяет вам выбирать форму пуль (диск, круг, квадрат).

input.pw {
    -webkit-text-security: disc;
}

Демо: http://jsfiddle.net/ThiefMaster/6uJJw/1/

Однако это, по-видимому, нестандартное. По крайней мере Safari CSS docs говорят, что это расширение Apple. Он отлично работает в Chrome - очевидно - но я не думаю, что любой другой механизм рендеринга поддерживает его...

Ответ 4

Это работает только для поля text (:

input { -webkit-text-security: none; } 
input { -webkit-text-security: circle; } 
input { -webkit-text-security: square; } 
input { -webkit-text-security: disc; /* Default */ }

Ответ 5

В принципе вы можете сделать

input { -webkit-text-security: disc; }

внутри вашего файла css.

Но осторожность, кто-то может просто "проверить элемент" в Chrome и изменить элемент css с "диска" на "none", а реальный текст будет отображаться как день.

Что касается отключения select/copy, обратитесь к этому сообщению: Как отключить выделение выделения текста с помощью CSS?

Ответ 6

Если вы хотите предотвратить функциональность копирования вставки, вы можете использовать:

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none;

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