7

到目前为止，我已经完成了第一部分，我成功地使用这个 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()：

谢谢你。

附言

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

4

4 回答 4

4

您不需要更换组件，只需将 的 设置为type如下代码：thispassword

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

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

更新

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

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();
    }
于 2013-07-01T06:25:22.970 回答
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>
于 2013-07-01T06:41:25.423 回答
1

试试这个小插件

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

检查小提琴

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

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

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

于 2013-07-01T06:30:02.803 回答
0

我将从一个建议开始，将您的 javascript 和 css 与您的标记分开。它被认为是老派，现在是一种不好的做法。IE 中的 setAttribute 和 getAttribute 存在一些已知问题，因为它可能对您很重要，我会尝试使用其他东西。尝试用谷歌搜索：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 中测试它，但它应该可以工作。

我的示例仅适用于您的特定任务，我建议您从中制作一个功能以使其适用于更广泛的任务领域。

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

于 2013-07-04T11:23:33.300 回答