asp:TextBox; is there an "OnFocus" or CSS equivalent
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 tryin开发者_StackOverflowg to keep it out. Thanks.
I'd also want an inactive to take away the border. Thanks.
Say your text box has id TextBox
, you can use #TextBox:focus { border: 1px solid blue; }
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.
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.
精彩评论