11

There seems to be a problem when setting focus to an element using jquery. It apparently does not trigger the :focus css property set on an element.

For example in my css I have:

div.item1:focus { border:2px solid red; }

in my jquery I have:

$("div.item1").focus();

The focus is set but there is no red border applied to the element.

aris
  • 111
  • 1
  • 5

5 Answers5

9

div elements do not use the :focus selector .. see the CSS2 spec

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

You could do this:

.hoverclass { border:2px solid red; }

$("div.item").hover(function() {
  $(this).addClass('hoverclass')
},function() {
  $(this).removeClass('hoverclass')
});

This uses .hover(), .addClass() and .removeClass()

Manse
  • 37,765
  • 10
  • 83
  • 108
4

focus() is only usable with form elements and links, and wont work if you try to use it on other types of elements.

See the jQuery doc for focus() for more information,

Øyvind Bråthen
  • 59,338
  • 27
  • 124
  • 151
  • 2
    In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. -- from jQuery docs link above – sabithpocker Jun 28 '12 at 12:33
  • Seems kind of sketchy to use as there is no definition of what a "recent browser" is, but it can be done that way as well of course. Other worksarounds is probably preferable. – Øyvind Bråthen Jun 28 '12 at 12:36
  • I just found ppk's work on this, he has included 'elements with tabindex' for his search it looks – sabithpocker Jun 28 '12 at 12:41
2

From the manual:

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

See this answer for an example: https://stackoverflow.com/a/5966034/1013082

Community
  • 1
  • 1
MetalFrog
  • 9,943
  • 1
  • 22
  • 24
0

Go to jQuery focus() page to see :

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

Go to PPK's study of focus on browsers here

PPK focus Event Browser compatibility

It looks like all browsers pass the tabindex test.

xlecoustillier
  • 16,183
  • 14
  • 60
  • 85
sabithpocker
  • 15,274
  • 1
  • 42
  • 75
-1

You need to do this: 

$("div.item1").focus(function(){
        $("div.item1").css("border","2px solid red");
      });
Ashwin Singh
  • 7,197
  • 4
  • 36
  • 55