将input type="text"改为input type="password" onfocus()

Question

将input type="text"改为input type="password" onfocus()

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事件中返回"Password..."值。

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

在focus()之前，它是这样的：

然后聚焦后：

然后返回到此onblur()：

谢谢。

附言：

我想使用纯javascript实现，不使用jQuery，并且我正在使用IE 7+。

- Mark

你的问题非常模糊。请给出一个清晰的标题，并详细说明您想要什么。 - mohkhan

最好的方法是使用水印 API，这将更有帮助。 - Manish Parmar

其实我知道水印的。但问题是，当我尝试在文本框中放置空字符串时，它根本不起作用。 - Mark

@loy，是的。我也这么认为。 - Mark

你能详细说明一下吗？或者给个例子？ - Mark

显示剩余3条评论

4个回答

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>

- Ritesh Nair

ie7不支持 placeholder。 - coolguy

1

嗨@Ritesh，我尝试了你的解决方案，在IE 9和10上运行良好。但是，我需要让它在IE 7和8上工作。感谢你的努力。 - Mark

1

尝试使用这个小插件。

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

查看fiddle

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

查看新的示例，了解纯JavaScript占位符。

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

- Shinov T

这是在使用jQuery运行吗？ - Mark

我想要使用纯JavaScript实现，而不是jQuery，并且我正在使用IE 7+。 :) - Mark

谢谢你的努力。 - Mark

检查新的fiddle 我已经用纯JavaScript更新了http://jsfiddle.net/Shinov/VdtBs/2/ - Shinov T

0

我想先给出一个建议，将你的 JavaScript 和 CSS 与标记分开。现在这被认为是落后和不好的做法。在 IE 中，setAttribute 和 getAttribute 存在一些已知问题，因此如果它对你很重要，我会尝试使用其他东西。尝试通过 Google 搜索来解决它： 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中测试它，但它应该可以工作。

我的示例仅适用于您特定的任务，我建议您将其制作成一个函数，以使其适用于更广泛的任务领域。

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

- orustammanapov

你能否更新你的答案并使其与此字段兼容:

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

- Mark

@ChristianMark 每个服务器端语言在接收客户端之前都会被转换为简单的HTML。由于JS在浏览器中运行，所以即使在您的示例中，上面的代码也是有效的。我还发现ASP TextBox将呈现为<input type=text/>，这就是为什么我认为您可以使用我的代码的原因。还有一些可能会让您感兴趣的内容：如何更改呈现元素或至少其类型。 - orustammanapov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fmodos · Accepted Answer

您无需更换组件，只需像下面的代码一样，将this的type设置为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();
    }