0

change focus to next component

asked 2009-04-02 08:57:40 +0800

sav gravatar image sav
21 1 1

updated 2009-04-03 02:06:16 +0800

Hi,
I created an entry form using many components like textbox, listbox, etc.. I moved the focus from one entry field to the other field by pressing tab key on keyboard. How could I change that tab key function with another key (like enter or arrow key) ?
Many thanks..

--
sav

delete flag offensive retag edit

12 Replies

Sort by ยป oldest newest

answered 2009-04-03 02:08:47 +0800

dennis gravatar image dennis
3669 1 6
http://www.javaworld.com....

read the document about onOK and onCtrlKey
http://docs.zkoss.org/wiki/Component_Events#Keystroke_Events
listen onFocus to know who get the focus.
use focus() to change the focus

I am wondering a problem, how do you know which one should be the 'next' focus. you must have many control on it if you don't use default browser tab key.

link publish delete flag offensive edit

answered 2009-04-03 07:43:43 +0800

sav gravatar image sav
21 1 1

I will set the next focus to be the next sibling.
The problem is I want to make a generic function to detect the current focus and change to the next focus after I press enter key. But, I cannot get the current focus component, there is no such method like getFocus().
Or is there any alternative solution..

thanx,
--
sav

link publish delete flag offensive edit

answered 2009-04-03 10:54:18 +0800

dennis gravatar image dennis
3669 1 6
http://www.javaworld.com....

updated 2009-04-03 10:54:36 +0800

sorry, there is no generic getFocus method currently.
please post to feature request if there is not such one.

link publish delete flag offensive edit

answered 2009-04-03 11:54:54 +0800

robertpic71 gravatar image robertpic71
1275 1

>> after I press enter key.
Why not process the enterkey?

<window id="root"  border="normal" 
            width="900px" height="90%" onOK="onEnter(event)">
	<grid>
            <rows>
               <row>
		LabelA
		<label id="labela" value="Value A" tooltip="help" />
		</row>
                <row>
                TextB
                <textbox id="textboxb" onBlur="onLeave(self)"/>
                </row>
                 <row>
                TextC
                <textbox id="textboxc" onBlur="onLeave(self)"/>
                  </row>
                  <row>
                TextD
                <textbox id="textboxd" onBlur="onLeave(self)"/>
                
                </row>
            </rows>
	</grid>
         <html id="helptext" content="test"/>
	<zscript>
                void onEnter(Event event) {
                      Component comp = event.getReference();
                      Component next = comp.getNextSibling(); 
                      helptext.content = "Enter for " + event.getReference().getId();
                      
                 } 
                 void onLeave(Component comp) {
                      helptext.content = "Leave field  " + comp.getId();
                 } 
        </zscript>
</window>

Check also the wiki entries:
How to Keep The Current Focused Component
Dynamic cursor/field-sensitiv help and tooltip

There is one drawback for all this resolutions: It is done serverside, and you need a server-roundtrip for a cursor-operation. However, no problem with a fast server and connection.

Find the next field could be a hard work. I.e. in this grid the getNextSibling() return null, you have to get the parent, nextSibling (=next Raw) and get the first Child which is an inputelement...

So maybe the better way is: to reuse the tabindex-defintion (scan the component tree) for the enter-key.

>> please post to feature request if there is not such one
getNextTab() (get next Component via taborder) or fire a tab-event could also be a resolution.

/Robert

link publish delete flag offensive edit

answered 2009-04-08 08:38:02 +0800

sav gravatar image sav
21 1 1

updated 2009-04-08 09:17:13 +0800

Many thanks.. ^:)^
So far, I tried ur solution to trap the enter key, and it works. Plus, to make it easily plugged into all my zuls, I created a component that add onOK event on the window and iteratively add onFocus to all components in the window on the fly. That way I could keep track on the focus element.
Yep, I wonder whether this way could decrease the performance..
And about tabindex, I couldn't find a way to make use of it, since I cannot find a method to fire tab key..

regards,
--
sav

link publish delete flag offensive edit

answered 2009-10-22 09:39:18 +0800

mpg2005m gravatar image mpg2005m
15

Hi, I had have the same problem and here post my solution, it works fine and you can change elements filter. This solution uses jquery but it very easy to implement, next I put the code, if anybody have or make a better solution, please send me :-))

First, I only use the onOK event in windows and with Clients.evalJavaScript make a call to the function with the event object uuid that makes de event.
After, I load jquery min and filter the components I want to tab into, find the position in that array and move to the next element, then put focus on it.
This works with ZK 3.0.6 I don't try this with early versions.

And that's all I hope it can help you.

<window id="frm" border="normal">
<attribute name="onOK">{
String cadena = "nextElement('" + event.reference.uuid + "')";
Clients.evalJavaScript(cadena);
}
</attribute>

<script src="./script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function nextElement(posActual){
var elements = jQuery('input:visible, textarea:visible, button:visible');
posActual = '#' + posActual;
var position = elements.index(jQuery(posActual));
elements.get(position+1).focus();
}
</script>
</window>

link publish delete flag offensive edit

answered 2009-10-22 19:37:27 +0800

samchuang gravatar image samchuang
4084 4

Thanks ~

Use jquery and do it at client is a good idea ~~

link publish delete flag offensive edit

answered 2010-03-12 20:56:12 +0800

mikehellsing gravatar image mikehellsing
42 1 1 1
http://kurohide.wordpress...

Hi, all..
I'm using Zk 5 CE, when i tried mpg2005m tips on my code to have a tab index when onOk function:

<attribute name="onOK">{
String cadena = "nextElement('" + event.reference.uuid + "')";
Clients.evalJavaScript(cadena);
}
</attribute>
<script src="/script/jquery-1.4.2.min.js"/>
<script type="javascript">
function nextElement(posActual){
var elements = jQuery('input:visible, textarea:visible, button:visible');
posActual = '#' + posActual;
var position = elements.index(jQuery(posActual));
elements.get(position+1).focus();
}
</script>

I got pop up window error :

Failed to process
script
nextElement is not defined

then I've tried & call an any very simple Javascript Function like:

function test() {
alert('testing success..');
}

And I got a same error, seem my page cannot call the Javascript function. Can anyone help me, or if there any solution for send key tab function with ENTER Key on Zk 5 CE. Thanks before.

Best Regards,

Maikel
([email protected])

link publish delete flag offensive edit

answered 2010-03-14 20:28:32 +0800

samchuang gravatar image samchuang
4084 4

Hi

if you have javascript error about function is not define, try to save the function in a .js file and load it by use

<?script type="text/javascript" src="/js/jquery-1.3.2.js"?>
<?script type="text/javascript" src="/js/your-function.js"?>

link publish delete flag offensive edit

answered 2010-03-17 04:19:24 +0800

mikehellsing gravatar image mikehellsing
42 1 1 1
http://kurohide.wordpress...

Hi, thanks samchuang, i've tried your sugestion, but still can't call any javascript function with same error :(

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
2 followers

RSS

Stats

Asked: 2009-04-02 08:57:40 +0800

Seen: 3,009 times

Last updated: Mar 18 '10

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