How to assign multiple onfocus events?

How do you assign multiple onfocus events to a input tag?

I have this input tag:

<input type="text" class="inputbox" id="password_login" size="12" name="passwd" maxlength="50" value="[password]" onfocus="if (this.type == 'text') {this.type='password'}" tabindex="3"/>

I also want to add this onfocus event to the tag:

onfocus="if (this.value == '[password]') {this.value=''}"

Is it possible to have more than one onfocus event in a tag, if so, how do you do this?

you can have as many lines of code as you like in an event handler function. just combine the 2 if blocks into 1 function to do what you need.

How do you do that?

I’ve tried this:

<input type="text" class="inputbox" id="password_login" size="12" name="passwd" maxlength="50" value="[password]" onfocus="if (this.type == 'text') {this.type='password'}, (this.value == '[password]') {this.value=''}" tabindex="3"/>

But that only works in Firefox, not in IE :frowning:

You cannot change the input type on IE. You’ll need to instead remove the input and replace it with a different input.

You can do that by having two separate input fields where you hide/show the appropriate input field.

Can you show me an example how you would do this?

Sure thing, here’s an example that uses jQuery to keep the scripting down to a fairly small amount:

See: jQuery: show plain text in a password field and then make it a regular password field on focus

Thanks! :smiley: I got it working now, only one thing I can’t figure out is how to give the password field the same color change as the text field without messing the code up :confused:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
 
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
 
<script language="Javascript">
 
$(document).ready(function() {
 
	$('#password-clear').show();
	$('#password-password').hide();
 
	$('#password-clear').focus(function() {
		$('#password-clear').hide();
		$('#password-password').show();
		$('#password-password').focus();
	});
	$('#password-password').blur(function() {
		if($('#password-password').val() == '') {
			$('#password-clear').show();
			$('#password-password').hide();
		}
	});
 
	$('.default-value').each(function() {
		var default_value = this.value;
		$(this).focus(function() {
			if(this.value == default_value) {
				this.value = '';
				$(this).css('color', '#000');
			}
		});
		$(this).blur(function() {
			if(this.value == '') {
				$(this).css('color', '#666');
				this.value = default_value;
			}
		});
	});
 
});
 
</script>
 
 
<style type="text/css">
 
#password-clear
{
display:none;
}

.default-value 
{
color:#666;
}

</style>
 
 
</head>
<body>
 
<form>
<div>
    <input class="default-value" type="text" name="email" value="Email Address" />
</div>
<div>
    <input id="password-clear" type="text" value="Password" autocomplete="off" />
    <input id="password-password" type="password" name="password" value="" autocomplete="off" />
</div>
</form>
 
</body>
</html>

Because there is a conflict between the password blur, and the form field blur events (where you cannot guarantee which one will trigger first) you could use setTimeout to delay the form field blur function just slightly, even by 100ms.

Or, you could tell the standard form field blur function to ignore the password fields, so that you can then treat those ones differently.

Could you make an example how you would implement this in the code above?

Sure thing, let’s find out how to do it.

At the jQuery selector documentation page there are a large range of techniques available, but the ones we’re after will allow us to say that we’re not interested in ones where the name starts with ‘password’.

They are the :not selector, and the [url=“http://api.jquery.com/attribute-starts-with-selector/”]attribute starts with selector

So instead of this line:

$('.default-value').each(function() {

We’ll say that we’re not interested in ones that start with “password”


$('.default-value:not([name^="password"])').each(function() {

because they have their own special set of functions to handle them.

Strange, I’m using:

$('.default-value:not([name^="password"])').each(function() {

instead of:

$('.default-value').each(function() {

But I’m still getting different colors:

The values “Email Address” and “Password” should be gray, and when you type in the fields the text should turn black.

What could be the problem?

The purpose of that is to stop the double handling of the password section.
Now you can just tell $(‘#password-password’) to be grey, perhaps from its own onfocus section, and things should be sweet.