Login input fields with static text, like ones on facebook? 2

[MrMiyagi]

Hello,

My problem is that i would like to have login input fields with text inside, like facebook has:

http://facebook.com/

(email & password fields)

The email text input field has the text "email" in it statically until start to type something else, and password input field has text "password".

Facebook front/login page has also a functionality to select the email field straight away on refresh, so that the user does not have to select it, but can just start typing login info. How can i do this function?

for example password field html:
<input type="password" class="inputpassword" id="reg_passwd__" name="reg_passwd__" value="" />
From this i can see that the word typed inside the value field will come visible to the password field, but facebook html code has an empty value="" so the words email & password must come from somewhere else...javascript?

<input type="password"/>
This will make the inputted text into censoring balls

<input type="text" value="password"/>
This will bring the word password on the input field on every refresh.

Facebook input field has html input tag type=password value="" and the censoring balls appear when start to type. How is this done?

Thank you very much for all the answers!

 

[Foamcow]

Whilst this is pretty easy to do using plain old Javascript, I would suggest you use a framework such as jQuery.
If you are likely to be adding other Javascript fanciness to your site a framework can be well worth the overhead of having to load it.

You can then do something like

$(document).ready(function(){
    // first capture the click and remove the text
    $('#emailfield').click(function(){
        if($(this).val()=='Email'){
            $(this).val('');
        }
    });


    // when the user clicks out of the field
    // check the contents and replace/act accordingly
    $('#emailfield').blur(function(){
        if($(this).val()==''){
            $(this).val('Email');
        }
    });    
});

That's very simplistic way of doing it and could be refined alot. But the above will work.

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[johnwm]

To set focus on an element see

http://www.w3schools.com/jS/tryit.asp?filename=tryjs_focus

Input fields of type password will automatically change the view of typed characters to be masked

If your email field is being autofilled when you refresh the page it is probably being done by your browser.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[johnwm]

I am a bit of a slow typist - sorry Foamcow!

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[feherke]

Hi

Foamcow, that will not produce the same effect. The FaceBook page is delivered with [tt]input[/tt] [tt]type="text"[/tt] to display the [tt]value[/tt], then on first [tt]onfocus[/tt] is replace by an [tt]input[/tt] [tt]type="password"[/tt] generated on the fly.


Feherke.

http://rootshell.be/~feherke/

 

[vicvirk]

This works in FF / but not in IE 6 - not tested in IE 7

I think it's kind of what you are looking for...

I recommend removing the in-line styles to a stylesheet.

<input onKeyPress = "clearContents(this.id,'email');" type="text" value="email" id="tbxEmail" style="color:#cccccc" /><br />
<input onKeyPress = "clearContents(this.id,'password');" type="text" value="password" id="tbxPassword" style="color:#cccccc" /><br />

<script>
// strValueToCheck is the value that is originally in the text box
	function clearContents(strElement,strValueToCheck) {
		if (document.getElementById(strElement).value == strValueToCheck) {
			document.getElementById(strElement).value = "";
			document.getElementById(strElement).style.color = "#000000";
			if (strValueToCheck == "password") {
				document.getElementById(strElement).type = 'password';
			}
		} 
	}
</script>

This one is a little messier, but works in IE 6, you'll need to add some functionality to check to see which text box was used.

<input onKeyPress = "clearContents(this.id,'email');" type="text" value="email" id="tbxEmail" style="color:#cccccc" /><br />
<input onKeyPress = "clearContents(this.id,'password');" type="text" value="password" id="tbxPasswordHolder" style="color:#cccccc" />
<input type="password" id="tbxPassword" style="display:none;" />
<script>
	function clearContents(strElement,strValueToCheck) {
		if (document.getElementById(strElement).value == strValueToCheck) {
			document.getElementById(strElement).value = "";
			document.getElementById(strElement).style.color = "#000000";
			if (strValueToCheck == "password") {
			try {
				document.getElementById(strElement).type = 'password';
			} catch (e) {
				document.getElementById(strElement).style.display = "none";
				document.getElementById("tbxPassword").style.display = "block";
				document.getElementById("tbxPassword").value = document.getElementById(strElement).value;
				document.getElementById("tbxPassword").focus();
				}
			}
		} 
	}
</script>

 

[MrMiyagi]

Thank you so much for help. This jscript is just what I need and works with all browsers!

But there is one problem. If I write something on the email field, and refresh the browser, instead of having the text "email" again the email field stays with the text I had inputted before refresh.

This doesnt happen on facebook login & problem doesn´t exist with password field on Firefox but IE shows the before refresh imputted text or empty field after refresh. Email field shows the before refresh inputted text on every browser. Is there a way to fix it? Thank you very much.

 

[ScottPrelewicz]

I didnt look very closely and should probably let vicvirk answer, but a quick thought would be to clearContents() and set the value tbxEmail in a body onload event handler.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[vicvirk]

RE the refresh: what Scott said shoud work.

function reSetContent() {
		document.getElementById("tbxEmail").value = "email";
		document.getElementById("tbxPasswordHolder").value = "password";
		document.getElementById("tbxEmail").focus();
	}

Call it as follows in your body tag:

<body onLoad="reSetContent()">

The function will also auto focus to the email address input box.

 

[MrMiyagi]

Excellent. Thank you very much

 

[MrMiyagi]

Firefox works perfect, but I found one more IE problem. When IE refreshes, the cursor sometimes shows up blinking at the end of email text and when backspace is pressed, it starts to erase letters one by one instead of wiping the whole email text out for the input. And if user starts writing here it writes with the gray letter that should never be visible except on the autofills.

http://facebook.com/

does this by erasing the auto fill instantly when text field is clicked or any key pressed? I am a beginner with jscript so this has been very helpful, thanks again.

 

[vicvirk]

in your input box, use onKeyDown instead of onKeyPress

<input [COLOR=red][b]onKeyDown[/b][/color] = "clearContents(this.id,'email');" type="text" value="email" id="tbxEmail" style="color:#cccccc" />

Also, I found another glitch, if someone has an email address like "emailme@mydomain.com", as soon as they type "email" and hit the "m" the whole thing gets erased...

To fix this, reset the onkeypress using javascript...

...
document.getElementById(strElement).style.color = "#000000";
			[COLOR=red][b]document.getElementById(strElement).onkeydown = function() {return;}[/b][/color]
			if (strValueToCheck == "password") {
			try {
...

 

[MrMiyagi]

Ok, thanks. This fixed the problem. I was thinking, from here would it be difficult to fix it so that it erases the auto fill instantly when text field is clicked with mouse or any key pressed?

 

[MrMiyagi]

actully this did not fix the problem. Im not sure if i added it correctly, but still when IE refreshes, the cursor sometimes shows up blinking at the end of email text and when backspace is pressed, it starts to erase letters one by one instead of wiping the whole email text out for the input. And if user starts writing here it writes with the gray letter that should never be visible except on the autofills. Fb login erases the auto fill instantly when text field is clicked.

My code now:

<table><td>
<input class="loginfilltext" onKeyPress = "clearContents(this.id,'email');" type="text" value="email" id="tbxEmail"/><br /></td><td>
<input class="loginfilltext" onKeyPress = "clearContents(this.id,'password');" type="text" value="password" id="tbxPasswordHolder"/>
<input class="loginfilltext" type="password" id="tbxPassword" style="display:none;" />
</td></table>
<script>
function clearContents(strElement,strValueToCheck) {
if (document.getElementById(strElement).value == strValueToCheck) {
document.getElementById(strElement).value = "";
document.getElementById(strElement).style.color = "#000000";
if (strValueToCheck == "password") {
try {
document.getElementById(strElement).type = 'password';
} catch (e) {
document.getElementById(strElement).style.display = "none";
document.getElementById("tbxPassword").style.display = "block";
document.getElementById("tbxPassword").value = document.getElementById(strElement).value;
document.getElementById("tbxPassword").focus();
}
}
}
}

function reSetContent() {
document.getElementById("tbxEmail").value = "email";
document.getElementById("tbxPasswordHolder").value = "password";
document.getElementById("tbxEmail").focus();
}
</script>

 

[ScottPrelewicz]

No. You could use an onFocus and set the input value to ''. Or do an onkeydown, trap only the first keypress and clear the text.

For the former, just add

onFocus="this.value='';"

You'd have to deal with the reSetContent() function setting focus for you. I think if you just move the last line to the top of the function, that would work.


Scott Prelewicz
Web Developer
COMAND Solutions

 

[vicvirk]

erkkki,

you did not make the changes I suggested, first of all your input boxes still say "OnKeyPress" when they should be changed to "OnKeyDown" and secondly, you don't have the js code in your script to change the onkeydown event once something has been typed...

Personally, I don't know why you are going to such lengths to achieve something that can be solved with a simple OnFocus like scott suggested - on facebook, the email field clears on focus not when you type something so

onFocus = checkFocus(this.id,'email')
onBlur = checkValue(this.id,'email')

function checkFocus(element,strValue) {
if (document.getElementById(element).value == strValue)
document.getElementById(element).value = "";
}

function checkValue(element,strValue) {
if (document.getElementById(element).value == "")
document.getElementById(element).value = strValue
}

You should have enough code in the thread to work in the fixes/changes for the password field.

 

[MrMiyagi]

Hello,

I worked a bit too late last night to post that code without your latest changes...anyway I added them, and got it working like this:

<div id="code">
<h4>CODE</h4>
<div class="body">

<table><td>
<input class="loginautofilltext" OnKeyDown = "clearContents(this.id,'email');" type="text" value="email" id="tbxEmail"/><br /> </td><td>
<input class="loginautofilltext" OnKeyDown = "clearContents(this.id,'password');" type="text" value="password" id="tbxPasswordHolder"/>
<input class="loginautofilltext" type="password" id="tbxPassword" style="display:none;" />
</td></table>

<script>

function clearContents(strElement,strValueToCheck) {
if (document.getElementById(strElement).value == strValueToCheck) {
document.getElementById(strElement).value = "";
document.getElementById(strElement).style.color = "#000000";
document.getElementById(strElement).onkeydown = function() {return;}
if (strValueToCheck == "password") {
try {
document.getElementById(strElement).type = 'password';
} catch (e) {
document.getElementById(strElement).style.display = "none";
document.getElementById("tbxPassword").style.display = "block";
document.getElementById("tbxPassword").value = document.getElementById(strElement).value;
document.getElementById("tbxPassword").focus();
}
}
}
}
function reSetContent() {
document.getElementById("tbxEmail").value = "email";
document.getElementById("tbxPasswordHolder").value = "password";
document.getElementById("tbxEmail").focus();
}
</script>

</div></div>

I might still try to get it work with your OnFocus example, if it is better. Thank you very much for help again

 

[MrMiyagi]

ps. How do you make those nice white code boxes?

 

[feherke]

Hi

How do you make those nice white code boxes?

Using the [tt][ignore]

[/ignore][/tt] .. [tt][ignore]

[/ignore][/tt] TGML tag. That is Tek-Tips own markup.

Feherke.

http://rootshell.be/~feherke/

 

[Foamcow]

Foamcow, that will not produce the same effect. The FaceBook page is delivered with input type="text" to display the value, then on first onfocus is replace by an input type="password" generated on the fly.

Doh! Didn't look at the question properly.

Thought I'd post a way to do it with jQuery. Probably a neater way to do this but intial tests indicate this seems to work.

	$(document).ready(function(){
	    // first capture the initial click and bind a custom function to it
	    $('#password').bind('click',fieldcheck);
	
		function fieldcheck(el){
			if($(this).attr('type')=='text'){
				$(this).val('');
				$(this).replaceWith('<input type="password" name="password" id="password" />')
				$('#password').focus();
				$('#password').bind('blur',fieldcheck);
				
			}
			
			if($(this).attr('type')=='password'){
				if($(this).val()==''){
					$('#password').replaceWith('<input type="text" name="password" id="password" value="Password" />');
					$('#password').bind('click',fieldcheck);
				}
			}
		}
	   
	});

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.