Как отображать текст в поле пароля

Question

У меня есть поле пароля на странице. Я хочу отобразить текст «Введите пароль» на экране перед вводом пароля, но в фокусе, когда пользователь вводит пароль, он должен вернуться к типу пароля

РЕДАКТИРОВАТЬ: Я также использую Jquery, поэтому любое маленькое решение jquery подойдет

Answer 1

[Последний пересмотр с поддержкой IE]
^{Обновление для IE9: версия 9 IE позволяет изменять атрибут типа для элементов ввода типа текст / пароль взад и вперед}

Как упомянуто в комментариях (и проверено), предыдущие примеры не работали в IE, так как не допускают изменения типа по сценарию ... Вот обходной путь, который заменяет элемент другим далее ( код предполагает, что вы начинаете с текстового поля )

var element = document.getElementById('mysearch');

var text_to_show = 'Enter Password';

element.value = text_to_show; // set the message for the first time

element.onfocus = function(){ 
                       if (this.value == text_to_show) 
                           {
                             var newElement = convertType(this);
                            newElement.value = '';
                            setTimeout(function(){document.getElementById(newElement.id).focus()},100);
                           }
                       }
element.onblur = function(){ 
                       if (this.value == '') 
                          {
                            var newElement = convertType(this);
                            newElement.value = text_to_show;
                          }
                    }


function convertType(elem)
{
    var input = document.createElement('input');
    input.id = elem.id;
    input.value = elem.value;
    input.onfocus = elem.onfocus;
    input.onblur = elem.onblur;
    input.className = elem.className;
    if (elem.type == 'text' )
      { input.type = 'password'; }
    else
      { input.type = 'text'; }

    elem.parentNode.replaceChild(input, elem);         
  return input;
}

[обновление]

отменить исходный ответ, я пропустил часть, в которой вы хотите сохранить поле в качестве пароля ( со скрытым содержимым )

Исправленный ответ :

var element = document.getElementById('mysearch');

var text_to_show = 'Enter Password';
element.type="text"; // set the type to text for the first time
element.value = text_to_show; // set the message for the first time
element.onfocus = function(){ 
                       if (this.value == text_to_show) 
                           {
                            this.type="password";
                            this.value = '';
                           }
                       }
element.onblur = function(){ 
                       if (this.value == '') 
                          {
                            this.type="text";
                            this.value = text_to_show;
                          }
                       }

[оригинальный ответ]

var element = document.getElementById('inputID'); 
//  inputID should be the ID given to the password element

var text_to_show = 'Enter Password'
element.value = text_to_show;
element.onfocus = function(){ if (this.value == text_to_show) this.value = '';}
element.onblur = function(){ if (this.value == '') this.value = text_to_show;}

Answer 2

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

Internet Explorer не позволяет изменять тип ввода с «пароля» на «текст», поэтому любое решение, которое пытается это сделать, не будет работать в IE.

Вот пример, который работает по крайней мере в IE7 (он должен работать в IE6, но я не пробовал), Chrome и Firefox.

jQuery(function($) {
    function make_label_field(password_input, label) {
        var new_input = document.createElement("input");
        new_input.type = "text";
        new_input.size = password_input.size;
        new_input.className = password_input.className;
        new_input.setAttribute("style", password_input.getAttribute("style"));
        // Copy any additional properties you need. You may want to add a class
        // to style the label differently

        new_input.value = label;

        $(new_input).focus(function() {
            $(this).hide();
            $(password_input).show().focus();
        });
        return new_input;
    }

    $("input[type=password]").each(function() {
        $(this).after(make_label_field(this, "Enter password")).hide();
    }).blur(function() {
        if (this.value == "") {
            $(this).hide().next().show();
        }
    });
});

Answer 3

Вы можете дать ему фон изображения с текстом Enter Password, который вы динамически изменяете с помощью JavaScript (в идеале, просто удаляя класс CSS),

<input type="password" class="enter-password"> or
<input type="password" style="background-image:url('enter-password.png');">

или поместите подделку input, которую вы замените на javascript для пароля input.

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

document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/ работает в Firefox, но я бы не стал полагать, что он хорошо работает в IE без тестирования.

Answer 4

Вы можете использовать этот плагин jQuery , который поддерживает поля пароля.

Answer 5

Есть несколько способов сделать это, но вот один из них. Я не говорю, что это эффективно, но это лучше объяснит, что происходит.

Скопируйте и вставьте это, чтобы попробовать!

<body>
<script type="text/javascript">

    text=document.createElement("input");
    text.type="text";
    text.value="password";
    text.setAttribute("onclick", 'toPassword();');
    text.setAttribute("onblur", 'toText();');
    document.getElementsByTagName("body")[0].appendChild(text);

    function toText()
    {
        if(document.getElementsByTagName("input")[0].value=="password" || document.getElementsByTagName("input")[0].value=="")
        {
            document.getElementsByTagName("input")[0].type="text"; 
            document.getElementsByTagName("input")[0].value="password"
        }
    }

    function toPassword()
    {
        if(document.getElementsByTagName("input")[0].value=="password" || document.getElementsByTagName("input")[0].value=="")
        {
            document.getElementsByTagName("input")[0].type="password";
            document.getElementsByTagName("input")[0].value=""
        }
    }
</script>
</body>

Создает текстовое поле со значением password, а затем, когда вы щелкаете по нему, изменяется на поле пароля и удаляет его значение. Если вы нажмете и ничего не введете, он вернется к text и изменит его значение на password.

Вы также можете ввести текстовое поле вместе с меньшим количеством кода JavaScript, все, что вам нужно, это функции.

Если вы хотите, чтобы это работало в IE, вам нужно создать два входа, один для текста и один для пароля и альтернативные display=none и display=block для каждого из них.

element.style.display="none";

Answer 6

[пересмотренный ответ] Добавлена ​​совместимость для ie6 с этого сайта

<form id="form1" name="form1" method="post" action="">
  <input onfocus="clear_field(this,'Enter Username')" onBlur="revert_field(this,'Enter Username')" name="username" type="text" id="username" value="Enter Username" />
  <p>
<input type="text" id="passwordtext" value="Password" onclick="switchto(1)" onkeydown="switchto(1)">
<input type="password" id="password" value="" onblur="if (this.value=='')switchto(0)" style="display:none">
  <p>
    <input  type="submit" name="button" id="button" value="Submit" />
  </p>
</form>

<script>
function switchto(q){
    if (q){
        document.getElementById('passwordtext').style.display="none";
        document.getElementById('password').style.display="inline";
        document.getElementById('password').focus();
    } else {
        document.getElementById('password').style.display="none";
        document.getElementById('passwordtext').style.display="inline";
    }
}
function clear_field(field,text){
if(field.value==text){
    field.value = "";
    }
}
function revert_field(field,text){
if(field.value==""){
    field.value = text;
    }
}
</script>

[предыдущий пост] может быть, это поможет.

<script>
function clear_field(field){
field.value='';
}
function change(){
document.getElementById('pass').value='';
document.getElementById('pass').type='password';

}
</script>