ansaurus

Question

Answer 1

+5 A:

You COULD do this:

<input type="text" name="username" id="usernameInput" onfocus="change(this);" onblur="changeBack(this);">
<input type="text" name="password" id="passwordInput" onfocus="change(this);" onblur="changeBack(this);">

With this javascript:

function change(el) {
    el.style.background='#FFFF00';
}

function changeBack(el) {
    el.style.background='#FFFF00';
}

A couple of notes:

You are using onclick - while that may work, I think what you want is onfocus.
As far as I know, it is not necessary to return false; on either of these events.

While the above will work with plain Javascript, I am obligued to suggest the jQuery way:

<input type="text" name="username" id="usernameInput">
<input type="text" name="password" id="passwordInput">

And then do this with jQuery:

$(function() {
    $('input').focus(function() {
        $(this).css('background-color', '#FFFF00');
    }).blur(function() {
        $(this).css('background-color', '#FFFF00');
    });
});

I personally feel this is cleaner, as inline javascript events are ugly, but the first one should work.

Paolo Bergantino 2009-04-07 20:19:47

Wow, it worked! :) You are the best!!!

2009-04-07 20:24:51

I understand why you included the recommendation for jQuery (since everyone else is suggesting it). But this is a JavaScript author who had to ask how to make a function to change the background color of an input more generic. I think jQuery would just confuse him at this point.

Grant Wagner 2009-04-07 20:26:03

I just thought I'd throw it in there, but you are definitely right.

Paolo Bergantino 2009-04-07 20:27:57

+1 i agree with your suggestion

TStamper 2009-04-07 20:31:22

Answer 2

+1 A:

<input type="text" name="whatever" id="uniqueVal" onclick="return gotFocus(this);" onblur="return lostFocus(this);">

function gotFocus(el) {
    el.style.background = 'Red';
    return false;
}

function lostFocus(el) {
    el.style.background = 'Blue';
    return false;
}

I personally like returning false from these types of functions to reduce the amount of code I have to write in the HTML element attribute.

Grant Wagner 2009-04-07 20:19:55

Answer 3

+1 A:

You should try using jQuery - that's what we use. It would be very simple using jQuery.

<script>
$(document).ready(function(){
  $(".PrettyInput")
    .focus(function() { $(this).css("background-color", "#FFFF00"); })
    .blur(function() { $(this).css("background-color", "#FFFF00"); });
});
</script>

<html>
<body>
  Username: <input type="text" class="PrettyInput" />
  Password: <input type="text" class="PrettyInput" />
</body>
</html>

Brandon Montgomery 2009-04-07 20:21:51

Answer 4

A:

Here's a complete example using jQuery.

<html>   

  <head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
    <script>
      $(document).ready(function(){
      $("input:text")
        .focus(function() { $(this).css("background-color", "#FFFF00"); })
        .blur(function() { $(this).css("background-color", "#FFFFFF"); });
      });
    </script>

  </head>         

  <body>

    <form>
      Username: <input type="text" /> 
      Password: <input type="text" />   
    </form>

  </body>

</html>

Patrick McElhaney 2009-04-07 20:33:08

Answer 5

A:

Is there a way I can only make one CSS id, and one javascript function to change all inputs?

Yes, you can attach one event handler to many elements simply by assigning it as a function; the subject element comes in as ‘this’. You don't even need an ID.

For completeness, since no-one else seems to have said it, it's quite possible to have the advantages of non-inline, unobtrusive event handlers without dragging in the whole of jQuery (which is probably a bit excessive if all you want is a few highlighting inputs):

<input type="text" name="username" />
<input type="text" name="password" />

<script type="text/javascript">
    function inputFocussed() {
        this.style.backgroundColor= 'yellow';
    };
    function inputBlurred() {
        this.style.backgroundColor= 'white';
    };

    // Bind to input[type=text]
    //
    var inputs= document.getElementsByTagName('input');
    for (var i= inputs.length; i-->0;) {
        if (inputs[i].type=='text') {
            inputs[i].onfocus= inputFocused;
            inputs[i].onblurred= inputBlurred;
    }   }
</script>

bobince 2009-04-07 22:01:31

ansaurus

tags:

views:

answers:

JavaScript help with forms?

related questions