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

您可以使用支持密码字段的this jQuery plugin。

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' answer中的插件），则必须在密码字段上方放置标签（插件的作用），或隐藏密码字段并显示文本输入到位，直到获得焦点。

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

[修订回答] 为this website

添加了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>

<击>

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

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

6 个答案: