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()：

之前的情况

enter image description here

然后关注：

enter image description here

然后返回此onblur()：

谢谢。

P.S。

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

Answer 1

您无需替换该组件，只需将type的{{1}}设置为this，如下代码所示：

password

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

<强>更新

我没有测试这段代码，但它为newO添加了一个<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="this.type='password'">事件监听器，并在调用时将输入替换为旧的。

onblur

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存在一些已知问题，因为它对您很重要，我会尝试使用其他东西。试着谷歌吧：issues with setAttribute and getAttribute in ie

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

<强> 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中进行测试，但它应该可以工作。

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

编辑：对于较新的浏览器，我会使用placeholder attribute。这是browser support

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

4 个答案: