asp:TextBox; is there an "OnFocus" or CSS equivalent

Question

What I would like to do is essentially:

/*psuedo css code*/
input:textbox:active
{
    border: 1px solid blue;
}

Kind of like how there is a:active but do that for a textbox. I know I can use Javascript for it, but for support reasons since I don't know who here knows JavaScript, I'm trying to keep it out. Thanks.

I'd also want an inactive to take away the border. Thanks.

Answer 1

Say your text box has id TextBox, you can use #TextBox:focus { border: 1px solid blue; }

Answer 2

You can highlight the box with CSS, but it will not put focus on the box. To do that, you need to use JavaScript, whether or not you expose it to the developers. You can hide the fact there is JavaScript by using the techniques here.

Answer 3

You already have an answer for the general case on half decent browsers, in case anyone wants to get it working in older versions of IE as well then here is a hack I prepared earlier. It's based on the SuckerFish drop down menu code, the basis of this is that any styles you have for :hover you repeat for class .sfhover like this:

textarea:hover, input[type=text]:hover, input[type=password]:hover, textarea.sfhover, input.sfhover {
    border: 1px solid blue;
}

Then you have a function which attaches event handlers to INPUT and TEXTAREA elements for the focus and blur events:

function highlightInputs () {
    var sfEls = document.getElementsByTagName("INPUT");
    for (var i=0; i<sfEls.length; i++) {
        if (sfEls[i].type == 'text' | sfEls[i].type == 'password') {
            sfEls[i].onfocus=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onblur=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    sfEls = document.getElementsByTagName("TEXTAREA");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}

The code only has to run in IE, so you don't have to worry about cross browser compatibility. Then use some sort of IE detection method to run the function on page load only in IE:

if (window.attachEvent) window.attachEvent("onload", highlightInputs);

You could also use conditional comments or something like jQuery's $.browser.msie test if you have that library loaded already.