I want my (ExtJS) toolbar buttons not to grab the focus on the web page when they are clicked, but to do their "thing" while leaving the focus in the form that had it when they were clicked. How do I do that?
A:
EDIT:
I misunderstood the question.
You could just add onClick event handler to the button which focuses the form once the button has been clicked. Click should still focus the button and then the onClick handler will indirectly trigger onBlur event by focusing form.
If you don't have any onFocus, onBlur event handlers which need get fired, then solution provided by Rene Saarsoo is a lot cleaner.
Maiku Mori
2009-06-11 16:45:16
A:
Because the toolbar buttons are just styled ordinary HTML button elements then this is an actual browser behavior, and you should think twice before changing it. But nevertheless...
You should be able to prevent the botton from receiving focus by just returning false from its onclick handler.
Rene Saarsoo
2009-06-11 17:06:30
Thanks ReneI thought that was the right approach, but it didn't seem to work when I tried it.ATM I have implemented a nasty solution where on each Form I set defaults: { onBlur: fieldExit } where fieldExit puts the calling object into a lastField variable, then at the end of the buttons' handler (they all use the same one) I do lastField.focus(). This works for text fields, but oddly not for checkboxes (I have not tested others yet).
Mike Peat
2009-06-11 23:02:58
you can prevent the button *keeping* focus, but you can't return focus to the previous element without keeping track of such
annakata
2009-06-12 11:00:28
A:
Maybe you should try to use stateful and state change properties for form fields or whatever to get focus back?
Thevs
2009-06-12 10:37:30
+2
A:
I don't think there's an easy way to do what you want to do because it's the browser's default behaviour.
You could of course blur() the button as soon as it is clicked, but that would simply unselect everything. To have the previously active object regain focus, you'd have to create a "memory" of sorts by adding a blur handler for every element to keep track of which element had/lost focus last (store the id of the element in a global and update it when an element loses focus).
Alan
2009-06-12 10:45:12
A:
document.activeElement stores the currently focussed element.
So on your toolbar, you can add a "mousedown" handler to this function :
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
Try this example :
<html>
<head>
<script>
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert('clicked')" value="Toolbar" />
</body>
</html>
Alsciende
2009-06-12 10:52:39
I don't think this will work - by the time you can execute it the button is the active element.
annakata
2009-06-12 10:58:56
It will work. The variable ae is stored inside the closure, and won't change.
Alsciende
2009-06-12 12:01:29
document.activeElement is part of HTML5. Only Firefox2 and Safari don't support it, though the last nightly builds of Safari are reported to support it.
Alsciende
2009-06-12 12:20:53
A:
I would attach one blur event listener to all fields. This listener should save the field, that lost the focus, in a global variable.
Then all the toolbar button should get one focus event listener. This listener should focus the field, that was saved as described above.
This code should work, although it didn't test it
Jochen
2009-06-16 08:43:39