CODEWITHSUNDEEP
javascripthtmlasp.netformstextbox
Mark
Mark

Reputation: 8431

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:

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():

enter image description here

then after focus:

enter image description here

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+.

Upvotes: 7

Views: 49454

Answers (4)

Ritesh Nair
Ritesh Nair

Reputation: 3355

<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>

Upvotes: 2

orustammanapov
orustammanapov

Reputation: 1862

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

Upvotes: 0

Shinov T
Shinov T

Reputation: 862

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

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

Upvotes: 1

fmodos
fmodos

Reputation: 4568

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();
    }

Upvotes: 4

Related Questions