Html 将 input type="text" 更改为 input type="password" onfocus()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17398409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change input type="text" to input type="password" onfocus()
提问by Christian Mark
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. A placeholderattribute that function on IE.
简而言之，我想实现一个类似 facebook 的密码文本框。在 IE 上起作用的占位符属性。
Here how it goes before focus():
这是之前的情况focus()：
then after focus:
然后在焦点之后：
then return to this onblur():
然后回到这个onblur()：
Thank you.
谢谢你。
P.S.
聚苯乙烯
I want to implement this without jQuery(pure javascript) and I am working with IE 7+.
我想在没有 jQuery（纯 javascript）的情况下实现这个，我正在使用 IE 7+。
采纳答案by fmodos
You dont need to replace the component, just set the typeof the thisto passwordlike 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 onblurevent listener to newO, and when invoked it replace the input to the old one.
我没有测试这段代码，但它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();
}
回答by Ritz
<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>
回答by Shinov T
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 占位符的新小提琴
回答by orustammanapov
I will start with an advice to separate your javascript and css from your markup. 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. Try to google it: issues with setAttribute and getAttribute in ie
我将从一个建议开始，将您的 javascript 和 css 与您的标记分开。它被认为是老派，现在是一种不好的做法。IE 中的 setAttribute 和 getAttribute 存在一些已知问题，因为它可能对您很重要，所以我会尝试使用其他东西。尝试用谷歌搜索：ie 中的 setAttribute 和 getAttribute 问题
I made something in jsfiddle, i hope it works for you, if not - let me know. Code snippet: simple example.
我在 jsfiddle 中做了一些东西，我希望它对你有用，如果没有 - 让我知道。代码片段：简单示例。
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
编辑：对于较新的浏览器，我会使用placeholder 属性。这是浏览器支持
