Hi,
just like when you press the TAB key, i would like to be able to toggle the next input that have the focus when user click Enter into a input control. I can easily trap the onEnter callback but just couldn’t find how to tell the form to select the next input control, just like pressing on TAB but when its the Enter key.
any idea?
thanks
Sylvain
Hi
There is a property “tabIndex”:
myForm.getInput(name).tabIndex
Just use it in “onEnter” event
Not sure I get how this work, let’s say the following case:
let’s say I have the following fields on my form
FirstName
LastName
Title
the Focus is on FirstName and I click the Enter key.
in the OnEnter event, how do I know that I was in FirstName (no parameter to onEnter) and once I am in onEnter, how do I say setFocus to LastName, just like I had press TAB. TabIndex does seems to be able to change the index but doesn’t set the focus?
I guess i could keep the name of the field on the onFocus event to know which one i am in, but then I still don’t see how I simulate the “next” field focus.
sorry I may be missing something…
Thanks
Here is a code sample foк you:
function doOnLoad() {
formData = [
{type: "settings", labelWidth: 30, inputWidth: 130},
{type:"input", name: 'inp1', label:'inp1'},
{type:"input", name: 'inp2', label:'inp2'},
{type:"input", name: 'inp3', label:'inp3'},
{type:"input", name: 'inp4', label:'inp4'},
{type:"input", name: 'inp5', label:'inp5'},
{type:"input", name: 'inp6', label:'inp6'},
{type:"input", name: 'inp7', label:'inp7'},
{type:"input", name: 'inp8', label:'inp8'},
{type:"input", name: 'inp9', label:'inp9'}
];
myForm = new dhtmlXForm("myForm", formData);
fd = 1;
myForm.setFocusOnFirstActive("inp1");
myForm.attachEvent("onEnter",function(){
myForm.setItemFocus(formData[fd+1].name);
fd +=1;
if (formData[(fd + 1)]== undefined){
fd=0;
}
});
}
Thanks, what about a bit more complex form, seems like it would need a more complex logic?
formData = [
{ type: "fieldset", name: "theInfo", label: "", inputWidth: "auto", list:
[
{type: "settings", labelWidth: 30, inputWidth: 130},
{type:"input", name: 'inp1', label:'inp1'},
{type:"input", name: 'inp2', label:'inp2'},
{type:"input", name: 'inp3', label:'inp3'},
{type:"input", name: 'inp4', label:'inp4'},
{type:"input", name: 'inp5', label:'inp5'},
{type:"input", name: 'inp6', label:'inp6'},
{type:"input", name: 'inp7', label:'inp7'},
{type:"input", name: 'inp8', label:'inp8'},
{type:"input", name: 'inp9', label:'inp9'},
{type:"block",width:200,
list:
[
{type:"input", name: 'inp10', label:'inp10'},
{type:"input", name: 'inp11', label:'inp11'}
]
}
]}
];thanks!
I needed to the same functionality and created a prototype which works for the types: input, checkbox, radio, select and calendar.
If you want to try it, add the prototype in your js file and then after the form is created do:
myform.keyPlus();Here’s the prototype…it’s a bit long…
dhtmlXForm.prototype.keyPlus = function(){
var keyps = {}
keyps.cancelEvent=function(event) {
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
}
keyps.focus=function(frm, ev, id) {
keyps.cancelEvent(ev);
if ( frm.getItemType(id) == 'radio' )
frm.setItemFocus( id, frm.getCheckedValue(id) )
else
frm.setItemFocus(id)
}
keyps.radioNext=function(inp, ev, id, value) {
var frm = this
var hit = false;
var done = false;
frm.forEachItem(function( oId, oValue ){
if (done){ return }
if ( id == oId ) {
if (hit) {
frm.checkItem( id, oValue )
frm.setItemFocus( id, oValue )
keyps.cancelEvent(ev);
done = true;
return;
}
if (value == oValue) hit = true;
}
})
}
keyps.radioPrior=function(inp, ev, id, value) {
var frm = this
var done = false;
var pValue = ""
frm.forEachItem(function( oId, oValue ){
if (done){ return }
if (id == oId) {
if (value != oValue)
pValue = oValue
if (value == oValue) {
frm.checkItem( id, pValue )
frm.setItemFocus( id, pValue )
keyps.cancelEvent(ev);
done = true;
return;
}
}
})
}
keyps.reverse=function(inp, ev, id, value) {
var frm = this
var frm = frm
var done = false;
var prev;
this.forEachItem(function(xid, rvalue){
if (done){ return }
if (
(id == xid && prev != undefined) &&
(frm.getItemType(xid)=='input'||frm.getItemType(xid)=='checkbox'||frm.getItemType(xid)=='radio'||frm.getItemType(xid)=='select'||frm.getItemType(xid)=='calendar'||frm.getItemType(xid)=='button')
)
{
keyps.focus(frm, ev, prev)
done = true;
return
}
if ( frm.getItemType(xid)=='input'||frm.getItemType(xid)=='checkbox'||frm.getItemType(xid)=='radio'||frm.getItemType(xid)=='select'||frm.getItemType(xid)=='calendar'||frm.getItemType(xid)=='button'){
prev = xid;
return
}
})
if (!done && prev != undefined) {
keyps.focus(frm, ev, prev)
}
}
keyps.forward=function(inp, ev, id, value) {
var frm = this
var hit = false;
var done = false;
var first, hitRadioName
this.forEachItem(function(xid, rvalue){
if (done){ return }
if (hit) {
if (frm.getItemType(xid)=='input'||frm.getItemType(xid)=='checkbox'||frm.getItemType(xid)=='select'||frm.getItemType(xid)=='calendar'||frm.getItemType(xid)=='button' ) {
keyps.focus(frm, ev, xid)
done = true;
return;
}
if (frm.getItemType(xid) == 'radio' ) {
if (hitRadioName == xid ) return
keyps.focus(frm, ev, xid)
done = true;
return;
}
return
}
if (first == undefined){
if (
frm.getItemType(xid) == 'input' ||
frm.getItemType(xid) == 'checkbox' ||
frm.getItemType(xid) == 'select' ||
frm.getItemType(xid) == 'calendar' ||
frm.getItemType(xid) == 'radio'
) first = xid
}
if (hit == false) {
if ( id == xid && (frm.getItemType(xid)=='input'||frm.getItemType(xid)=='checkbox'||frm.getItemType(xid)=='select'||frm.getItemType(xid)=='calendar'||frm.getItemType(xid)=='button' ) ) {
hit = true
return
}
if ( frm.getItemType(xid) == 'radio' && id == xid && value == rvalue ) {
hit = true
hitRadioName = xid
return
}
}
})
if (!done && first != undefined) return keyps.focus(frm, ev, first)
}
keyps.handeler=function(inp, ev, id, value){
if (ev.keyCode==9 || ev.keyCode==13) {
if (ev.keyCode==13 && this.getItemType(id)=='button') {
this.clickButton(id)
keyps.cancelEvent(ev);
return
}
if (ev.keyCode==13 && inp.hasAttribute("rows") ) return
if (ev.shiftKey)
keyps.reverse.apply(this, arguments)
else
keyps.forward.apply(this, arguments)
}
if ( this.getItemType(id) == 'radio') {
if (ev.keyCode==39 || ev.keyCode==40) keyps.radioNext.apply(this, arguments)
else if (ev.keyCode==37 || ev.keyCode==38) keyps.radioPrior.apply(this, arguments)
}
}
this.attachEvent("onKeyDown", keyps.handeler)
}Also…forgot to mention, the radio groups will function like standard browser radios, once in a radio group, use the left/right arrow keys to move through the group.
Thanks I will give it a try!
Great, please let me know if it works 
seems to work fine!
Thanks