I have created a multi-prompt prompt page. When a user runs the report and tabs through the page, the focus goes from one item to then next, unfortunately this includes going to a text item if that is the next item on the prompt page.
I have found and written and placed a JavaScript on the prompt page which controls the initial focus place and then moves the focus from prompt box to prompt box when tab is pressed.
HOWEVER when it gets to the last prompt item, instead of putting the focus on either the CANCEL or FINISH button it puts the focus back on the first text item.
Does anyone know what i can add to the JavaScript to get the focus to go to either the CANCEL or FINISH button?
Thanks
John
You need to add tabIndex to the buttons. Can you post the JS here?
If not, you need to identify the buttons.
document.querySelector("[name*=cancel]") will find the cancel button
document.querySelector("[name*=finish]") will find the finish button
document.querySelectorAll("[name*=cancel],[name*=finish]") will return a nodeList with both.
Depending on how you're assigning the tabIndex, you can just use the above.
The style on the bottoms is using the :focus-visible selector, it's just changing the border a bit so it's a little hard to see which button is currently in focus. I would recommend adding a style to make it a little more obvious.
JS Below:
var f = getFormWarpRequest();
var p1 = f._textEditBoxPP1,p2 = f._textEditBoxCit1,p3 = f._textEditBoxPP2,p4 = f._textEditBoxCit2,p5 = f._textEditBoxPP3,p6 = f._textEditBoxCit3,p7 = f._textEditBoxPP4,p8 = f._textEditBoxCit4,p9 = f._textEditBoxPP5,p10 = f._textEditBoxCit5,p11 = f._textEditBoxThreshold,p12 = f._textEditBoxMonths;
p1.tabIndex=1;
p2.tabIndex=2;
p3.tabIndex=3;
p4.tabIndex=4;
p5.tabIndex=5;
p6.tabIndex=6;
p7.tabIndex=7;
p8.tabIndex=8;
p9.tabIndex=9;
p10.tabIndex=10;
p11.tabIndex=11;
p12.tabIndex=12;
<body onLoad="p1.focus()">
document.querySelector("[name*=finish]").tabIndex=14;
document.querySelector("[name*=cancel]").tabIndex=15;
Sorry, same issue, goes from last prompt box to the first text item.
John
try setting the finish and cancel index to 13 and 14, I noticed I left a gap there.
It may also be possible the querySelector isn't finding the finish/cancel buttons. What browser are you using? what version of cognos? In the browser console if you type in document.querySelector("[name*=finish]") does it find the finish button?