Menu
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.
P.S.
I want to implement this without jQuery(pure javascript) and I am working with IE 7+.
681
<input> elements of type password provide a way for the user to securely enter a password. The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•").
<input type="text" onfocus="this.value=''" value="Blabla">
The onfocus attribute fires the moment that the element gets focus. Onfocus is most often used with <input>, <select>, and <a>. Tip: The onfocus attribute is the opposite of the onblur attribute.
The <input type="password"> defines a password field (characters are masked).
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();
}
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
