如何在密码字段中显示文本

Question

我在页面上有密码字段。 我想在输入密码之前在屏幕上显示文本“输入密码”，但是当用户输入密码时，焦点应该回到密码类型

编辑：我也在使用Jquery，所以任何小的jquery解决方案都可以

Answer 1

[包括IE支持的最新修订]
^{IE9的更新：IE的第9版允许来回更改text / password类型的输入元素的type属性}

正如评论中所提到的（并经过验证），前面的例子在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

您可以使用此jQuery插件 ，它支持密码字段。

Answer 3

您可以使用javascript动态更改的文本Enter Password为其提供图像背景（理想情况下只需删除CSS类），

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

或者将用javascript替换的虚假input放入密码input 。

我不确定如何通过浏览器来动态更改input类型。

document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/适用于Firefox，但我不会依赖它在IE上运行良好而不进行测试。

Answer 4

如果您不想使用插件（如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 5

[修改后的答案]从本网站添加了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>

[上一篇]也许这个帮助。

\n

\n

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

Answer 6

有几种方法可以做到，但这是一种方法。 我并不是说这是有效的，但这将更好地解释正在发生的事情。

复制并粘贴此内容即可试用！

<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";