0

How to make a component programmatically lose its focus so that the 'next' component catches it?

asked 2008-09-02 15:57:47 +0800

cvarona gravatar image cvarona
554 1 6

Hi everybody,

I need to capture the Enter key being pressed on textboxes in order to make them lose the focus and pass it to the "next" component. A certainly bizarre requirement indeed, but it looks like there are some rough boys out there for whom the tab key is too small and delicate. I've tried the following:

<textbox id="someTb" onOK="nextTb.focus()" />

This certainly works; nonetheless our zul forms are all automatically generated and we'd rather not generate the 'nextTb' part but rely on the zk default mechanism (regardless of whether we set values for the tabindex property or not).

I've tried something like

<textbox onOK='Events.postEvent( 'onBlur', self, null )' />

which, unless I'm missing something, does not work. I think it shouldn't either, for it comes to me as this makes the server side know a certain component has lost its focus in order to elicit some reaction, rather than to effectively induce the 'onblur' event on the client side.

Then I tried

<textbox onOK='Clients.evalJavascript( "document.getElementById( \'" + self.getUUID() + "\' ).blur()' />

which does not raise any exception but does not work either.

I don't know whether you have any idea as to how could I programmatically focus the next component. I miss some method that allows me to know, given a certain component, which is the "next" one we can set the focus upon. I've queried the forum and it looks like somebody came across this issue before but neglected to translate his request for help into a feature request, as the admin demanded from him. Should I post this as a fr now?

With kind regards

C. Varona

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2008-09-03 06:08:16 +0800

henrichen gravatar image henrichen
3869 2
ZK Team

updated 2008-09-03 06:10:01 +0800

If your zul forms are all automatically generated, you shall have all the information of "which is the next component" given a component. Only you have to maintain such information in your application when you generate the form.

Or, you can traverse the component hierarchy to "store" such information.

link publish delete flag offensive edit

answered 2008-09-03 06:53:36 +0800

cvarona gravatar image cvarona
554 1 6

Of course, whether the form is generated or manually written you can decide which component comes next from a given one. It's only that I'd rather rely in the form's default order rather than having to guess it up upon generation (to the best of my knowledge there is no way to accomplish this but by resorting to some complex algorithm, see later on).

As for traversing the component hierarchy in order to know which is the next focusable component it's not that easy; I've been unable to mimic the browser's behaviour; I've thought that from a given component I should search its children first, then its siblings, its sibilings children and by last (I guess) its parent's siblings and so on all the way up. I don't know whether this is the right way, but I haven't managed to produce a satisfying implementation, which anyway should be quite complicated in comparison to solutions like forcing the onBlur on the client side (the fact that non-focusable components are not easily recognisable (and thus skippable) is also a (minor) obstacle).

With kind regards

C. Varona

link publish delete flag offensive edit

answered 2008-09-03 08:52:29 +0800

henrichen gravatar image henrichen
3869 2
ZK Team

updated 2008-09-03 08:55:14 +0800

I think I understand your concern. However, as my understanding, you will not be able to "kick" focus away by giving blur() and expect the focus "jump" to next "available" component. Rather, it is like someone "pull" the focus over.

Maybe you can give tabindex to guarantee the focus sequence and you sort the component on the tabindex to move the focus.

See if others have better solution on this.

link publish delete flag offensive edit

answered 2008-09-03 10:31:37 +0800

cvarona gravatar image cvarona
554 1 6

You're right, blurring a component does not set the focus on the next one. I've also tried

<![CDATA[
<textbox id="text1">
<attribute name="onOK">
Clients.evalJavaScript(
"newev = document.createEvent( 'Events' );" +
"newev.initEvent( 'onkeydown', true, true );" +
"newev.keyCode=9;" +
"document.getElementById('" + event.getTarget().getUuid() +
"' ).dispatchEvent( newev );" );
</attribute>
</textbox>
]]>
which of course does not work either (making the browser believe somebody has pressed the tab key it's not the same as somebody actually doing it).

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2008-09-02 15:57:47 +0800

Seen: 441 times

Last updated: Sep 03 '08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More