Change input type=“text” to input type=“password” onfocus()
Question
So far I have accomplished the 1st part, I successfully change the input type from text to password with this 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: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.
In short, I want to implement a facebook-like password textbox. A placeholder attribute that function on IE.
Here how it goes before focus() :
then after focus:
then return to this onblur() :
Thank you.
PS
I want to implement this without jQuery(pure javascript) and I am working with IE 7+.
4 answers
solution1
4 ACCPTED 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:
<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/
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.
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();
}
solution2
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
edit 2:hope this helps,tested with 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>
solution3
1 2013-07-01 06:30:02
Try this small plugin
<script>
$(".contentplaceholder").placeholderContent();
</script>
Check the fiddle
http://jsfiddle.net/Shinov/VdtBs/
Check the new fiddle for pure javascript place holder
solution4
0 2013-07-04 11:23:33
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
I made something in jsfiddle, i hope it works for you, if not - let me know. Code snippet: 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';
});
}
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.
It should work although i'm using linux and haven't time to test it in 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.