Javascript/getElementById question

dlg0351

05-29-2006, 06:02 AM

I would like to recreate the following onFocus/onBlur class change using getElementById but I am not sure how to. Can anyone help me? Any help is greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>

<style>
.search-input-off {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
}
.search-input-on {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #FFFFE1;
}
#search-button {
font-family: arial, sans serif;
font-size: 11px;
color: #444;
font-weight: bold;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #EEE;
}
</style>
</head>

<body>

<form>
<input type="text" class="search-input-off"
onFocus="className='search-input-on';" onBlur="className='search-input-off';">

<input type="submit" value="Search" id="search-button">
</form>

</body>
</html>

danbopes

05-29-2006, 06:39 AM

This is an example of your script using getElementById

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>

<style>
.search-input-off {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
}
.search-input-on {
padding: 1px 1px 1px 2px;
font-family: arial, sans serif;
font-size: 11px;
color: #444;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #FFFFE1;
}
#search-button {
font-family: arial, sans serif;
font-size: 11px;
color: #444;
font-weight: bold;
border-top: 1px solid #BBB;
border-bottom: 1px solid #444;
border-left: 1px solid #BBB;
border-right: 1px solid #444;
background-color: #EEE;
}
</style>
<script type="text/javascript">
function Focus()
{
document.getElementById('text').className = 'search-input-on';
}

function Blur()
{
document.getElementById('text').className = 'search-input-off';
}
</script>

</head>

<body>

<form>
<input type="text" id="text" class="search-input-off"
onFocus="Focus();" onBlur="Blur();">

<input type="submit" value="Search" id="search-button">
</form>

</body>
</html>

Mr J

05-29-2006, 08:00 AM

You could also possibly just add this to the events

<input type="text" class="search-input-off" onFocus="this.className='search-input-on';" onBlur="this.className='search-input-off';">

dlg0351

05-29-2006, 02:55 PM

Thanks!

Is there any benefit to use getElementById in place of this.className?

Mr J

05-29-2006, 03:16 PM

Is there any benefit to use getElementById in place of this.className?
I don't think so in this instance