Question

When the page loads, I want to focus and highlight (border color or background color change) an input control. How can I do it? This is what I got so far.

<script type="text/javascript">
    $(function () {
        $("#txt1").focus();            
    });
</script>

Answer 1

Take a look at CSS :focus selector. And just specify CSS class like:

#txt1:focus {
    border-color:red;
}

As it is not supported by older browsers (IE7 plus some other). You may want to do that with JS.

$("#txt1").focus(function(){ $(this).addClass("focused")});
$("#txt1").blur(function(){ $(this).removeClass("focused")});    

Where focused is defined like this:

#txt1.focused {
   border-color:red;
}

EDIT:

Jquery.focus docs.

$("#txt1").focus(function(){ $(this).addClass("focused")});

Line above simply binds a handler to focus event and does not change a focus or execute it immediately. In order to get a field focused on page load another line should be added after that one:

$("#txt1").focus();

This one will set a focus on selected element and run a handler attached previously.
Shorter notation:

$("#txt1").focus(function(){ $(this).addClass("focused")}).focus();

Demo with element autofucused on page load