将输入类型=“文本”更改为输入类型=“密码”onfocus（）

Question

到目前为止，我已经完成了第一部分，我用这个javascript成功地将输入类型从文本更改为密码：

function replaceT(obj) {
        var newO = document.createElement('input');
        newO.setAttribute('type', 'password');
        newO.setAttribute('class', 'textbox');
        newO.setAttribute('name', obj.getAttribute('name'));
        obj.parentNode.replaceChild(newO, obj);
        newO.focus();
    }

和ASP代码：

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="replaceT(this)"></asp:TextBox>

我想要的是第二部分。 如何返回“ 密码... ”值onblur。

简而言之，我想实现一个类似facebook的密码文本框。 在IE上运行的占位符属性。

这里是如何在focus()之前进行的：

在此输入图像描述

然后关注：

在此输入图像描述

然后返回到这个onblur() ：

谢谢。

PS

我想在没有jQuery（纯javascript）的情况下实现这一点，我正在使用IE 7+。

Answer 1

你不需要更换部件，只需设置type的this对password如下面的代码：

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="this.type='password'">

这是一个jsfiddle工作示例： http ： //jsfiddle.net/mZyTG/

更新

我没有测试这段代码，但它向newO添加了一个onblur事件监听器，并在调用时将输入替换为旧的。

function replaceT(obj) {
        var newO = document.createElement('input');
        newO.setAttribute('type', 'password');
        newO.setAttribute('class', 'textbox');
        newO.setAttribute('name', obj.getAttribute('name'));
        newO.addEventListener("onblur", function(){newO.parentNode.replaceChild(obj, newO)}, false);
        obj.parentNode.replaceChild(newO, obj);
        newO.focus();
    }

Answer 2

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..."placeholder="Enter your password" >

只需将此代码放在您的asp部分，不需要javascript希望这有帮助

编辑2：希望这有帮助，用ie 10测试

 <html>
 <script>
 function a()
{
document.getElementById("p1").value="";
document.getElementById("p1").type="password";

}

function b()
{
if(document.getElementById("p1").value=="")
{
document.getElementById("p1").type="text";
document.getElementById("p1").value="Password";
}
else
{   
document.getElementById("p1").type="password";

}


}
</script>
<body>
Password:<input type="text" value="Password" onclick="a();" id="p1"         

onblur="b();">
<body>
</html>

Answer 3

试试这个小插件

 <script>
   $(".contentplaceholder").placeholderContent();
 </script>

检查小提琴

http://jsfiddle.net/Shinov/VdtBs/

检查新的小提琴纯粹的javascript占位符

http://jsfiddle.net/Shinov/VdtBs/2/

Answer 4

我将从一个建议开始，将你的javascript和css与你的标记分开。 它被认为是旧学校，现在是一个不好的做法。 IE中的setAttribute和getAttribute存在一些已知问题，因为它对您很重要，我会尝试使用其他东西。 尝试google it：在ie中使用setAttribute和getAttribute的问题

我在jsfiddle做了一些东西，我希望它对你有用，如果没有 - 让我知道。 代码片段：简单示例。

HTML

<input class='placeholder' value="Type here..."/>

CSS

.placeholder {
    color: #aaa; 
}
.text {
    color: #000;
}

JS

var input = document.getElementsByTagName('input')[0];

if(input.addEventListener) {
    input.addEventListener('blur', function(){
        this.type = 'text' 
        this.value = 'Type here...';
        this.className = 'placeholder';
    }, false);
    input.addEventListener('focus', function(){
        this.type = 'password'
        this.value = '';
        this.className = 'text';
    }, false);
} else if(input.attachEvent) {
    input.attachEvent('onblur', function(){
        this.type = 'text' 
        this.value = 'Type here...';
        this.className = 'placeholder';
    });
    input.attachEvent('onfocus', function(){
        this.type = 'password'
        this.value = '';
        this.className = 'text';
    });
}

通过id访问元素会使其更具体和更快，但是通过标记名称访问元素将允许您在循环的帮助下为所有输入元素应用相同的代码。

它应该工作，虽然我使用Linux，没有时间在ie中测试它。

我的示例仅适用于您的特定任务，我建议您使用它来创建一个函数，使其适用于更广泛的任务领域。

编辑：对于较新的浏览器，我会使用占位符属性。 这是浏览器支持

将输入类型=“文本”更改为输入类型=“密码”onfocus（）

问题描述

4 个解决方案

解决方案1
4 已采纳 2013-07-01 06:25:22

解决方案2
2 2013-07-01 06:41:25

解决方案3
1 2013-07-01 06:30:02

解决方案4
0 2013-07-04 11:23:33

将输入类型=“文本”更改为输入类型=“密码”onfocus（）

问题描述

4 个解决方案

解决方案1 4 已采纳 2013-07-01 06:25:22

解决方案2 2 2013-07-01 06:41:25

解决方案3 1 2013-07-01 06:30:02

解决方案4 0 2013-07-04 11:23:33

解决方案1
4 已采纳 2013-07-01 06:25:22

解决方案2
2 2013-07-01 06:41:25

解决方案3
1 2013-07-01 06:30:02

解决方案4
0 2013-07-04 11:23:33