[Resolved] CSS: onFocus= to a style name?

**niclipse** · Jan 29th, 2006, 10:58 PM

I know that we can do this...

Code:

onfocus="this.style.border='2px solid #000000'"

but I was wondering if there is a way to use onFocus to point at an existing class in a stylesheet?

for example:

Code:

onfocus="this.style.class=''textfield'"

?

**Peter1** · Jan 30th, 2006, 04:00 AM

try

Code:

onfocus="this.className='textfield'"

**niclipse** · Feb 1st, 2006, 06:52 PM

No dice. Any other ideas?

**niclipse** · Feb 3rd, 2006, 12:47 PM

Okay, here's a better explaination of my error:

I have javascript validator on my form on this page:
deleted.com/buyers/prequalify2.asp

There is a stylesheet on this page that has a class called "textfields" that i use on my input fields for forms. Originally, this class did not have a background image, just a background-color (light red)

When the user submits the form and comes up with an error, the javascript will change the input fields background-color to a bright red, letting them know that there is an error at that field.It worked great until...

I added a background image to that class "textfields". The forms look great now with the background on the input fields; however, when the user generates an error, the input field no longer turns yellow. I believe it has to do with the internal javascript I wrote using onfocus and onblur [see below], in the input fields. The onblur creates a thick black border around the input field when the user clicks on it (allows them to know they have that field selected) and the onblur removes the thick border to let them know they are no longer in that input box.

Here is the class in the global stylesheet:

Code:

.textfields {background-position: left top; background-image:url('/forum/templates/Classic/images/common/cell-background.gif'); background-repeat:no-repeat; background-attachment:fixed; border: 1px solid #000000; cursor: url('/cursor.cur'); color: black; font-family: "trebuchet ms",tahoma, verdana, helvetica, arial; font-size: 11px; line-height: normal; text-decoration: none;}

and here is the onblur code that is screwing everything up:

Code:

 onfocus="this.style.border='2px solid #000000'" onblur="this.style.border='1px solid #000000'"

Any ideas on how to get my input fields to turn yellow on error and how to get onblur to retrieve the original text style?

Here's the page throwing the error:
deleted.com/buyers/prequalify2.asp

Perfect example is I turned the class off on the very field input field, "first name". The rest of them have the class still on. If you fill out nothing on the form, only the input field mentioned above will turn yellow.

EDIT: ---
Also, the validation script is the one that triggers the yellow color.
Here's a snippet from validate.js: (deleted.com/_server-side/forms/validate.js) and or qforms.js

Code:

// this is background color style to use when a form field error has occurred
this.errorColor = "yellow";
// the style attribute to adjust when throwing an error
this.styleAttribute = "backgroundColor";

**penagate** · Feb 4th, 2006, 01:44 AM

Please don't double post the same problem.

Now, on your page, I don't see any background image on the input fields. Is it still supposed to be there?

**niclipse** · Feb 4th, 2006, 11:44 AM

it is there, it is a light fade. here it is: http://deleted.com/forum/templates/C...background.gif

on deleted.com/buyers/prequalify2.asp\the first field has no class on it, the rest do (meaning the first one doesnt have a background on it and the rest do)

aslo, if you use google toolbar and it's preset to fill forms for you, it will take over the style on those forms to let you know it can fill them in.

**niclipse** · Feb 11th, 2006, 08:43 PM

bump

**PlaGuE** · Feb 11th, 2006, 10:48 PM

No bumpy!

**aconybeare** · Feb 14th, 2006, 06:18 AM

I don't know where you are with this now, this works, but as you've pointed out it is overidden by the google toolbar! It seems to be the label beside the control that google looks at, so as I've done here I've changed the label from Name to FName and it no longer recognises it, therefore you just need a way of conning the toolbar, either have a different label or use an image as a label?

Code:

<html>
<head>
<title>TEST Page 2</title>
<style>
.normal { background-color: #cccccc; color: #000000; }
.focus  { background-color: #ffff00; color: #000000; }
</style>
<script type="text/javascript">
	function toggleColor(objElement){
	  if (objElement.className=='normal'){
		objElement.className='focus';
	  }else{
		objElement.className='normal';
	  }
	}
</script>
</head>
<body onload="document.myFrm.txtName.focus()">
<form name="myFrm" id="myFrm" method="post">
<table border="0">
  <tr>
    <td align="left">FName:&nbsp;</td>
    <td>
      <input name="txtName" id="txtName" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)">
    </td>
  </tr>
  <tr>
    <td align="left">Address</td>
    <td>
      <textarea name="txtAddress" id="txtAddress" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)"></textarea>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <input type="submit" value="Submit" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)">
      <input type="reset" value="Reset" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)">
    </td>
  </tr>
</table>
</form>
</body>
</html>

Hope this helps

Cheers Al

**aconybeare** · Feb 14th, 2006, 06:28 AM

So does this -

Code:

<html>
<head>
<title></title>
<style>
	.focus{border:2px solid #000000;}
</style>
</head>
<body>
<form name="myFrm" id="myFrm">
<p>1st Box: <input type="text" name="txtText1" id="txtText1" value="test 1" onfocus="this.className='focus'" onblur="this.className=''"></p>
<p>2nd Box: <input type="text" name="txtText2" id="txtText2" value="test 2" onfocus="this.className='focus'" onblur="this.className=''"></p>

</form>
</body>
</html>

**niclipse** · May 3rd, 2007, 08:23 PM

aconybeare,

I used your method because I liked the ability to stuff the .focus style into a stylesheet and shorten the onblur link also.

One problem though:

now that i moved the focus to the stylesheet, when you onblur the text field grows past the size=35 that I specified.

Click on a input box to see what im talking about. Is there a way to stop this?
deleted.com/buyers/relocation.asp

Originally Posted by aconybeare

So does this -

Code:

<html>
<head>
<title></title>
<style>
	.focus{border:2px solid #000000;}
</style>
</head>
<body>
<form name="myFrm" id="myFrm">
<p>1st Box: <input type="text" name="txtText1" id="txtText1" value="test 1" onfocus="this.className='focus'" onblur="this.className=''"></p>
<p>2nd Box: <input type="text" name="txtText2" id="txtText2" value="test 2" onfocus="this.className='focus'" onblur="this.className=''"></p>

</form>
</body>
</html>

**aconybeare** · May 4th, 2007, 04:00 AM

Hi,

The problem appears to be in your ".textfields" class. If you comment out the following two lines -

Code:

    FONT-SIZE: 11px;
    FONT-FAMILY: "trebuchet ms",tahoma, verdana, helvetica, arial;

the problem goes away, I don't know why; it's beyond the scope of my knowledge. Replace your "textfields" class with this and try it.

Code:

.textfields
{
    BORDER-RIGHT: #000000 1px solid;
    BACKGROUND-POSITION: left top;
    BORDER-TOP: #000000 1px solid;
    /*FONT-SIZE: 11px;*/
    BACKGROUND-IMAGE: url(/forum/templates/Classic/images/common/cell-background.gif);
    BORDER-LEFT: #000000 1px solid;
    CURSOR: url('/cursor.cur');
    COLOR: black;
    LINE-HEIGHT: normal;
    BORDER-BOTTOM: #000000 1px solid;
    BACKGROUND-REPEAT: no-repeat;
    /*FONT-FAMILY: "trebuchet ms",tahoma, verdana, helvetica, arial;*/
    TEXT-DECORATION: none
}

Regards Al

**niclipse** · May 4th, 2007, 04:03 PM

without actually trying it yet, rather than comment them out, I bet if i added them to the new .focus class name i created, it would fix the problem. Im going to go try now...

**niclipse** · May 4th, 2007, 04:07 PM

yep, that fixed it. Thanks for the insight. Im certain the answer wasn't above you, just overlooked.

Thread: [Resolved] CSS: onFocus= to a style name?

Thread Tools

Display

[Resolved] CSS: onFocus= to a style name?

Re: CSS: onFocus= to a style name?

Re: CSS: onFocus= to a style name?

Re: CSS: onFocus= to a style name?

Re: CSS: onFocus= to a style name?

Re: CSS: onFocus= to a style name?

Re: [UNresolved] CSS: onFocus= to a style name?

Re: [UNresolved] CSS: onFocus= to a style name?

Re: [UNresolved] CSS: onFocus= to a style name?

Re: [UNresolved] CSS: onFocus= to a style name?

Re: [UNresolved] CSS: onFocus= to a style name?

Re: [Resolved] CSS: onFocus= to a style name?

Re: [Resolved] CSS: onFocus= to a style name?

Re: [Resolved] CSS: onFocus= to a style name?

Posting Permissions