39

I have a jquery ui dialog with tabs loaded dynamically/JSON with content. Due to the complexity, I can't really post a fiddle or a relevant code (too much code).

What's happening is that when the dialog opens, you can tab through the elements within the dialog, up to the first tab. After that, you cannot tab through to anywhere else. The focus is locked on that tab, even if you click elsewhere, that focus is locked on that tab.

I am unable to locate the actual cause of this issue.

So, how would I remove the focus programmatically?

Jason
  • 7,152
  • 11
  • 70
  • 118
  • What browser are you using? In IE you sometimes lose focus for no good reason. – Hossein Oct 31 '11 at 13:14
  • Has the keypress event for TAB been overwritten to manually manage focus switching (as one might do when showing modal dialog boxes)? – Shawn Chin Oct 31 '11 at 13:14
  • the only place I see a keypress event is for a keydown function to be able to hit the down arrow into the content of the tab. And it's across all browsers. – Jason Oct 31 '11 at 13:19

3 Answers3

59

This might help...

http://api.jquery.com/blur/

$('#tabName').blur();
Derek
  • 4,704
  • 4
  • 26
  • 37
  • 1
    This is the correct answer, however I didn't word/explain my situation clearly. I will update accordingly. thanks. – Jason Nov 02 '11 at 17:18
  • 3
    This works great and resolved a similar issue I was having. One quick change I'd recommend, if you are using jQuery and need to apply this generically to a scope of events you can do something like this: `$(document.activeElement).blur()` - whatever is active will lose focus at the time of the event. – Markus May 12 '15 at 17:15
  • 2
    How to do it with pure JavaScript? – AmerllicA May 30 '17 at 14:19
  • You can use blur() and focus() with pure javascript: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur – Laurel Thomson Feb 03 '20 at 02:22
3

Try triggering a blur event on the field you want to lose focus.

Mike Thomsen
  • 33,992
  • 10
  • 50
  • 76
0

I'd put in a load of alerts to find where the JS is failing. E.g.

alert(1);
var a = 10;
alert(2);
var b = null;
alert(3);
a += 5;
alert(4);
b.hello();
alert(5);

Obviously in this example the last alert will be 4.

It is not a nice approach but everyone has to do it at some point.

Vinnyq12
  • 1,439
  • 9
  • 8
  • 9
    Alert is not a proper way to debug, especially if it reacts to mousemove, hover or similar events. Almost any browser has a debugging console nowadays which you can write to using `console.log(...);` – ThiefMaster Oct 31 '11 at 13:21
  • 6
    The proper way to debug is what helps you track down a bug in the most efficient way. Alerts have a very useful role in debugging because they pause execution. Just yesterday I was debugging a glitchy jQuery animation and `console.log()` was useless for pinpointing where this visual glitch was coming from, because it happened so fast. Adding in alerts paused the animation at each step and allowed me to find exactly where the glitch was originating. You're right that the OPs method is not the proper way, and `console.log()` is better in that instance, but `alert()` has a place in debugging. – Gavin Sep 15 '13 at 12:05
  • 2
    @Gavin and rest. Better then to use the `debugger` command (at least in browsers that support it). It pauses execution, but still lets you use your developer tools to examine what's going on. With alert, all you get is a visual snapshot of the current state, which doesn't always help. – stafffan Jun 05 '14 at 08:59