Установите значение по умолчанию для ввода пароля, чтобы его можно было прочитать - PullRequest
Новая
       13

Установите значение по умолчанию для ввода пароля, чтобы его можно было прочитать

7 голосов
/ 25 января 2011

Я хочу иметь поле пароля, в котором будет написано «Пароль», прежде чем пользователь введет свой пароль (чтобы они знали, что это поле)

Я бы предпочел просто использовать Javascript, импорт jQuery для одного этого кажется расточительным, но я понятия не имею, как это сделать. Изображения объясняют довольно четко:

Как это выглядит:

enter image description here

Как я хочу, чтобы это выглядело:

enter image description here

Это очень простой веб-сайт и самый простой логин (без проверки и т. Д.)

Есть идеи? 

<input id="username" name="username" class="input_text" type="text" value="Username"  />
<input id="password" name="password" class="input_text" type="password" value="Password" />

Ответы [ 5 ]

18 голосов
/ 27 апреля 2011

Если вы используете HTML5, вам следует использовать атрибут-заполнитель .

<input id="username" name="username" class="input_text" type="text" placeholder="Username"  />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Если вы используете HTML4, вы можете создать поле поддельного пароля . 

<script type="text/javascript">
    function pwdFocus() {
        $('#fakepassword').hide();
        $('#password').show();
        $('#password').focus();
    }

    function pwdBlur() {
        if ($('#password').attr('value') == '') {
            $('#password').hide();
            $('#fakepassword').show();
        }
    }
</script>

<input id="username" name="username" class="input_text" type="text" v="Username"  />
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" />
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />
10 голосов
/ 25 января 2011

Измените ваш password ввод на простой тип ввода text.Затем, с помощью JavaScript (или JQuery) для события фокуса, измените его на тип ввода password.

Вот небольшой непроверенный пример с простым JavaScript (без JQUERY): 

<html>
<head>
   <script type="text/javascript">
      function makeItPassword()
      {
         document.getElementById("passcontainer")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("password").focus();
      }
   </script>
</head>
<body>
   <form>
      <span id="passcontainer">
         <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" />
      </span>
   </form>
</body>
</html>
6 голосов
/ 25 января 2011

Простое решение: 

<input id="username" name="username" class="input_text" type="text" placeholder="Username"  />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
1 голос
/ 20 июня 2015

Добавьте следующий код в ваш javascript: 

function makePasswordHidden() {
    document.getElementById("password").setAttribute("type", "password");
}

Измените ввод пароля: 

<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

Что он делает, он делает элемент ввода «паролем», и значение обновляется, чтобы оно было скрыто. Если вы хотите, чтобы значение = "Пароль" было видно, если поле оставлено пустым, добавьте следующую функцию javascript: 

function makePasswordShown() {
    document.getElementById("password").setAttrivute("type", "text");
}

И добавьте следующее к вашему паролю: 

onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
0 голосов
/ 29 марта 2013

У меня была другая идея решить эту проблему, и вам не понадобится Javascript: 

<input onclick="value=''; type='password';" name="password" type="text" value="Password" />

Или вы также можете сделать это так: 

<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

Я не знаю разницы между этими возможностями. Еще одна вещь, которую вы можете изменить, это написать вместо onclick=....... onfocus=.....

Я тоже не знаю здесь разницы.

Но я надеюсь, что смогу вам помочь. PS: Извините за мой плохой английский, я немец.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...