Как убрать и показать слово «пароль» в поле пароля

Question

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

Я использую PHP.

Код:

<input type="password" name="password" maxlength="50" id="pass"  
 onclick="this.value='';" onfocus="this.select()"        
 onblur="this.value=!this.value?'Password':this.value;" value="Password"> 

Answer 1

Для браузеров с поддержкой HTML5 вы можете просто использовать атрибут-заполнитель, например:

<input type="password" placeholder="Password Here">

Это покажет «Здесь пароль» для пользователей с поддержкой HTML5, но когда пользователь начинает печатать, онпокажет звездочки вместо.Другие ответы, приведенные выше, показали некоторые ответы, связанные с Javascript, но вскоре они нам даже не понадобятся:)

Answer 2

попробуйте использовать jQuery

$(document).ready(function(){
  $('#id_password_field').val('password');        
   $('#id_password_field').click(function(){
       if($(this).val()=='password'){$(this).val('')}
   });
   $('#id_password_field').focus(function(){
       if($(this).val()=='password'){$(this).val('')}
   });
});

Answer 3

Это абсолютно возможно благодаря множеству вариантов JavaScript.В дополнение к тому, что a.stgeorge опубликовал об использовании jquery, вы также можете написать свой собственный JS, чтобы сделать это.

Смотрите его в действии здесь: http://www.moditekka.com/pwsample.html

Пример HTML:

<input type="text" name="inpPass" id="inpPass" value="Password"/>

Фрагмент JavaScript (это не работает в IE, см. Ниже):

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        this.setAttribute("type", "password");
        this.value = "";
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        this.value = "Password";
        this.setAttribute("type", "text");
    }
}

РЕДАКТИРОВАТЬ: Если кто-то еще читает это, я только что понял, что мой аккуратный код не будет работать в IEБлагодаря продуманному решению в Сиэтле сделать свойство «type» доступным только после добавления элемента в DOM.Для этого я обновил код JavaScript ниже:

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'password');
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
        newInp.focus();
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'text');
        newInp.value = "Password";
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
    }
}

Answer 4

Это не правда, это возможно с помощью JavaScript.Вот учебник о том, как это сделать.В этом случае используется jQuery, но таких же результатов можно достичь, написав собственный JS-скрипт.

jПросмотр переключения ввода пароля

ура

Answer 5

Вы также можете делать то, что делает Tumblr.В основном у них есть div, который оборачивает поле ввода.Этот div включает в себя как метку формы, так и ввод.Проигнорируйте изменение изображения для простоты.Но я думаю, вам придется иметь дело с прозрачными изображениями / непрозрачностью, чтобы заставить их работать так, как они это делают.Поскольку метка находится за окном ввода формы.

Если вы смотрите firebug, когда нажимаете в окне, он добавляет второй класс вокруг div.(это больше относится к изображению на данный момент.) Но когда вы начинаете печатать, включается третий класс, который устанавливает метку для отображения: нет;

Итак, подытожим проще:

Div оборачивает метку и поле ввода.Div относительно расположен.Метка абсолютно расположена за полем ввода.

Используя onclick, они добавляют полупрозрачное состояние / меняют фоновое изображение.Когда вы начинаете печатать, он устанавливает метку для отображения ни одного;

Answer 6

Это невозможно из-за ограничений безопасности.

Вы можете попробовать (но это не сработает), используя следующий фрагмент

<input type="password" id="inPwd" name="inPwd" propose="Password dummy" />
$("#inPwd").attr("type", "text");

Answer 7

С чистым JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
  <script type="text/javascript">
  function ChangeToPassField() {
    document.getElementById('PasswordField').type="password";
  }
  </script>
  </head>
  <body>
  <input type="text" value="password" id="PasswordField" onfocus="ChangeToPassField()" />
  </body>
  </html>