将输入类型=“文本”更改为输入类型=“密码”onfocus（）
[英]Change input type=“text” to input type=“password” onfocus()
问题描述
So far I have accomplished the 1st part, I successfully change the input type from text to password with this javascript: 
到目前为止，我已经完成了第一部分，我用这个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();
}
and ASP code: 和ASP代码：
<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="replaceT(this)"></asp:TextBox>
What I want is the second part. 我想要的是第二部分。 How to return the " Password... " value onblur. 如何返回“ 密码... ”值onblur。
In short, I want to implement a facebook-like password textbox. 简而言之，我想实现一个类似facebook的密码文本框。 A placeholder attribute that function on IE. 在IE上运行的占位符属性。
Here how it goes before focus() : 这里是如何在focus()之前进行的：
then after focus: 然后关注：
then return to this onblur() : 然后返回到这个onblur() ：
Thank you. 谢谢。
PS PS
I want to implement this without jQuery(pure javascript) and I am working with IE 7+. 我想在没有jQuery（纯javascript）的情况下实现这一点，我正在使用IE 7+。
4 个解决方案
解决方案1
4 已采纳 2013-07-01 06:25:22
You dont need to replace the component, just set the type of the this to password like the code below: 你不需要更换部件，只需设置type的this对password如下面的代码：
<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="this.type='password'">
Here is a jsfiddle working example: http://jsfiddle.net/mZyTG/ 这是一个jsfiddle工作示例： http ： //jsfiddle.net/mZyTG/
Update 更新
I didn't test this code, but it add one onblur event listener to newO, and when invoked it replace the input to the old one. 我没有测试这段代码，但它向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();
}
解决方案2
2 2013-07-01 06:41:25
<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..."placeholder="Enter your password" >
just place this code in your asp section no need of javascript hope this helps 只需将此代码放在您的asp部分，不需要javascript希望这有帮助
edit 2:hope this helps,tested with ie 10 编辑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>
解决方案3
1 2013-07-01 06:30:02
Try this small plugin 试试这个小插件
<script>
$(".contentplaceholder").placeholderContent();
</script>
Check the fiddle 检查小提琴
http://jsfiddle.net/Shinov/VdtBs/ http://jsfiddle.net/Shinov/VdtBs/
Check the new fiddle for pure javascript place holder 检查新的小提琴纯粹的javascript占位符
http://jsfiddle.net/Shinov/VdtBs/2/ http://jsfiddle.net/Shinov/VdtBs/2/
解决方案4
0 2013-07-04 11:23:33
I will start with an advice to separate your javascript and css from your markup. 我将从一个建议开始，将你的javascript和css与你的标记分开。 It considered as old school and to be a bad practice nowadays. 它被认为是旧学校，现在是一个不好的做法。 There are some known issues with setAttribute and getAttribute in IE and since it probably important to you i would try to use something else. IE中的setAttribute和getAttribute存在一些已知问题，因为它对您很重要，我会尝试使用其他东西。 Try to google it: issues with setAttribute and getAttribute in ie 尝试google it： 在ie中使用setAttribute和getAttribute的问题
I made something in jsfiddle, i hope it works for you, if not - let me know. 我在jsfiddle做了一些东西，我希望它对你有用，如果没有 - 让我知道。 Code snippet: simple example . 代码片段： 简单示例 。
HTML HTML
<input class='placeholder' value="Type here..."/>
CSS CSS
.placeholder {
color: #aaa;
}
.text {
color: #000;
}
JS 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';
});
}
Accessing elements by id would make it more specific and faster but accessing elements by tag name would allow you to apply the same code for all input elements with help of loop. 通过id访问元素会使其更具体和更快，但是通过标记名称访问元素将允许您在循环的帮助下为所有输入元素应用相同的代码。
It should work although i'm using linux and haven't time to test it in ie. 它应该工作，虽然我使用Linux，没有时间在ie中测试它。
My example applied only to your specific task, i would recommend you to make a function out of it to make it applicable to wider area of tasks. 我的示例仅适用于您的特定任务，我建议您使用它来创建一个函数，使其适用于更广泛的任务领域。
EDIT: For newer browsers i would go with placeholder attribute . 编辑：对于较新的浏览器，我会使用占位符属性 。 Here is the browser support 这是浏览器支持
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.