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+.
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+.
Share Improve this question edited Jul 5, 2013 at 3:31 Mark asked Jul 1, 2013 at 6:16 MarkMark 8,43115 gold badges52 silver badges80 bronze badges 8- Your question is very ambiguous. Please give a clean title and elaborate explanation of what you want. – mohkhan Commented Jul 1, 2013 at 6:24
- You can achieve this using a simple background image. YOu don't have to change the type. Onfocus just remove the bg image and on blur if there is no content then just add the bg image. – mohkhan Commented Jul 1, 2013 at 6:40
- HTML5 format na @ChristianMark? – Olrac Commented Jul 1, 2013 at 6:40
- best way is to use watemark api which help you more – Manish Parmar Commented Jul 1, 2013 at 6:44
- Actually I knew about Watermark. But the problem is when I try to put a null/empty string value on the textbox simply didn't work. – Mark Commented Jul 1, 2013 at 6:48
4 Answers
Reset to default 4You 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>
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/
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