-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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.
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
sorry, there is no generic getFocus method currently.
please post to feature request if there is not such one.
>> 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
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
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>
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])
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"?>
Hi, thanks samchuang, i've tried your sugestion, but still can't call any javascript function with same error :(
Asked: 2009-04-02 08:57:40 +0800
Seen: 3,015 times
Last updated: Mar 18 '10