1 Reply Latest reply on Mar 25, 2010 6:09 AM by dan hop

    INPUT field:onfocus(backgroundcolor:#red),onblur(#ffffff);?

    dan hop Level 1

      Ok...

      I know it's gibberish.

      But I hope it demonstrates what I'm trying to do.

       

      My javascript checks to see if the input field is value= ""

      if true, it puts focus on that same input field.

      Works fine.

       

      I would like to have the input field change color (and maybe border color) when the field received focus.

       

      Seems like it should be simple - but I've searched the net for an answer I can understand.

       

      Also researched several books I have for the answer.

      No luck.

       

      My instinct suggest that I want a specal class"

       

           .onfocus(INPUT)

                bgcolor:#red

                border:5px reder

      [yeah-I'm wingin'it]

       

      My test page is at:

      http://www.hoppernet.info/ynot/talkCopy.php

       

      Anyone want to help me play in this sandbox?

      I have other web sites for more serious purpose that are being smacked by hackers. Am using this test form to improve the security (and in this case-usability) of the forms. When I get the kinks worked out I'll implement the fixes on the other forms.

       

      I reallly do appreciate your help.

       

      Dan H.

        • 1. Re: INPUT field:onfocus(Problem Fixed) !!!
          dan hop Level 1

          I found the answer to my own question.

          I just didn't know how to apply 'focus' to an INPUT field or a TEXTAREA.


          Found the answer in "CSS. DHTML & AJAX" by Jason C. Teague (Visual Quickstart Guide).

           

          Dan H.

           

          Here's the answer:

          ...............

          Version:1.0 StartHTML:0000000105 EndHTML:0000013503 StartFragment:0000002317 EndFragment:0000013467    

          <Head>

           

           

          <STYLE type="text/css">

           

          textarea

          {

                                  border-top: 1px solid #999;

                                  border-right: 2px solid #666;

                                  border-bottom: 2px solid #666;

                                  border-left: 1px solid #999;

          }

           

          textarea.feedback:focus

          {

                                  border-top: 1px solid #F00;

                                  border-right: 3px solid #C00;

                                  border-bottom: 3px solid #C00;

                                  border-left: 1px solid #F00;

                                  background: #BEEDFF;

          }

           

          input

          {

                                  border-top: 1px solid #999;

                                  border-right: 2px solid #333;

                                  border-bottom: 2px solid #333;

                                  border-left: 1px solid #999;

                                  font-size: 14px;

                                                         

          }

           

          input.formtext:focus

          {

                                  border-top: 1px solid #999;

                                  border-right: 2px solid #F00;

                                  border-bottom: 2px solid #F00;

                                  border-left: 1px solid #999;

                                  font-size: 14px;

                                  background: #FF9;

          }

          </STYLE>

          </HEAD>

          <BODY>

          <SCRIPT type="text/javascript">

           

           

          function ValidateForm(true_false)

           

          {

          if (document.inputform.topic.value== "")

                      {alert("Please enter the SUBJECT of your comments.");

                      document.inputform.topic.focus();           

                      return false;}

           

          else if (document.inputform.name.value== "")

                      {alert("You forgot to enter your name. \n Please do so now.");

                      document.inputform.name.focus();

                      return false;}

           

          else if (document.inputform.email.value== "")

                      {alert("Please enter your email address so we can reply to your note.");

                      document.inputform.email.focus();

                      return false;}

                     

          else if (document.inputform.comment.value== "")

                      {alert("Oops... You forgot to tell us your 'Comments'\n Just place your cursor in the 'Comments' area and tell us your thoughts.");

                      document.inputform.comment.focus();

                      return false;}

           

          else if (document.inputform.captcha_entry.value== "")

                      {alert("Please enter your email address so we can reply to your note.");

                      document.inputform.captcha_entry.focus();

                      return false;}

           

          else

           

          {return true;}

          </SCRIPT>

          </BODY>