Ярлык для поля пароля

<input type="text" value="useraname" />
<input type="password" value="password" />

Я использую jQuery, чтобы встроенные метки исчезали при щелчке/фокусе. Пароль показывает быков, как обычно, но мне интересно, возможно ли как-то показать метку «Пароль» в виде текста (вместо ••••) внутри поля пароля?

Отредактировано, чтобы добавить: я хочу, чтобы введенный пользователем пароль был скрыт, конечно!

Спасибо


input passwords jquery label field
person eozzy    schedule 10.12.2009    source источник

Ответы (7)


arrow_upward
6
arrow_downward

Для этого есть плагины. См., например, labelify.

person Community    schedule 10.12.2009
comment
Если я не ошибаюсь, в документации плагина не упоминается пароль. Я просто быстро изменил один из типов полей на «пароль», и все символы превратились в точки. Работает ли этот плагин с полями пароля, как запросил OP? - person megaSteve4; 14.03.2012
comment
Здесь та же история. Это только для текстовых полей, а не для полей пароля. - person Andrew WC Brown; 21.03.2012

arrow_upward
4
arrow_downward

зачем весь этот длинный сценарий? это простая задача, которую можно выполнить с помощью половины строки кода:

<input type='text' onclick="this.type='password',value=''" class='watever' value='password'..etc

ваше здоровье

person Nader Rouinia    schedule 14.07.2010
comment
Мне это нравится, но я думаю, что onfocus лучше, чем onclick, потому что он также срабатывает, когда пользователи вводят в поле вкладку... - person neokio; 22.11.2011

arrow_upward
2
arrow_downward

Подключаемый модуль jQuery Check In-Field Labels http://fuelyourcoding.com/scripts/infield/

person Adan Archila    schedule 15.11.2011

arrow_upward
1
arrow_downward

Проверьте код ниже. Просто добавьте addPassClear("Password") к любому элементу ввода, для которого вы хотите использовать эту функциональность.

$(function() {
$.fn.addPassClear =
function(text)
{
  return $(this).each(
  function()
  {
    $(this).focus(function(event){$(this).passFocusize(text); $(this).select(); });
    $(this).blur(function(event){$(this).passBlurize(text); });
  });
}
$.fn.passFocusize =
function(text)
{
  return $(this).each(
  function()
  {
    if ($(this).val()==text && $(this).attr("type")=="text")
    {
      $(this).val("");
      this.type="password";
    }
  });
};
$.fn.passBlurize =
function(text)
{
  return $(this).each(
  function()
  {
    if ($(this).val()=="")
    {
      $(this).val(text);
      this.type="text";
    }
  });
};
};
person dwlz    schedule 10.12.2009

arrow_upward
0
arrow_downward

Если вы сделаете тип ввода = "текстовое поле", вы сможете увидеть пароль.

person Galen    schedule 10.12.2009
comment
Конечно, но тогда и пароль будет виден. Мне просто нужно, чтобы метка была текстовой. - person eozzy; 10.12.2009
comment
я не уверен, что вы подразумеваете под этим. - person Galen; 10.12.2009
comment
Как только поле получит фокус, измените его на type=password. Предположительно, у вас уже есть код, который очищает значение, когда поле находится в фокусе, так что просто добавьте его туда. Хотя маршрут плагина может быть лучше. - person McPherrinM; 10.12.2009
comment
@WaffleMatt: Отличная идея, но я не знаю, как это сделать, может кто-нибудь помочь с кодом? Большое спасибо! - person eozzy; 10.12.2009

arrow_upward
0
arrow_downward

Я думаю, вам нужно будет динамически наложить ‹input type="text"› поверх поля пароля, чтобы сделать это.

person Chris Fulstow    schedule 10.12.2009

arrow_upward
0
arrow_downward

Мое решение близко к тому, что Дэн предоставил выше.

<script language="javascript" type="text/javascript">
    function SwapLabel(id, label, alttype) {
        $(id).focus(function () {
            if (this.value == label) {
                this.value = "";
                if (this.type == 'text' && label == 'Password') {
                    this.type = alttype;
                }
            }
        });
        $(id).blur(function () {
            if (this.value == "") {
                this.value = label;
                if (this.type == alttype && label == 'Password') {
                    this.type = 'text';
                }
            }
        });
    }
    $(document).ready(function () {
        SwapLabel('#UserName', 'Username', '');
        SwapLabel('#Password', 'Password', 'password');
    });
</script>

Альтернативой здесь было бы опустить параметр «метка» и просто использовать значение «название», что в основном и делает labelify.js. Вы можете добавить часть labelify, которая просто применяет эти обработчики событий ко всем вводам типа text, если хотите. Или загрузите labelify и добавьте приведенный ниже код, где это необходимо:

            if (this.type == 'text' && label == 'Password') {
                this.type = alttype;
            }

            if (this.type == 'text' && label == 'Password') {
                this.type = alttype;
            }

Единственное преимущество моего фрагмента перед labelify заключается в том, что он включает ответ на ваш первоначальный вопрос:

Интересно, возможно ли каким-то образом отобразить метку «Пароль» в виде текста (вместо ••••) внутри поля пароля?

person Jason Beck    schedule 11.07.2012