Page 1 of 1
Tabbing through browser address bar
Posted: Wed Jan 17, 2018 3:29 pm
by pjshuey
Is there a way to prevent tabbing from the last field on a screen into the browser's address bar?
Re: Tabbing through browser address bar
Posted: Wed Jan 17, 2018 4:23 pm
by Scott Klement
One way is to trap the tab key on the last input widget of the screen so that when you hit tab on that widget, it is ignored.
For example, you could do the following in the "onkeydown" event of the last input widget:
Code: Select all
function handleKey(event) {
// get the key code (cross-browser)
event = event || window.event;
var code = event.which || event.keyCode;
// if code=9 (tab), block it
if (code == 9) {
preventEvent(event);
}
}
handleKey
(the last lline must be the function name, by itself, with no parenthesis, etc, as shown above.)
In this example, when the tab key is pressed, it prevents the event (i.e.blocks the signal that the key was pressed down) from being sent to the browser. So, the cursor will remain in the field.
If that's not what you're looking for, please give more details. There are a lot of different ways to skin a proverbial cat, a different one might work for you.
Re: Tabbing through browser address bar
Posted: Thu Jan 18, 2018 3:50 pm
by pjshuey
This is exactly what I need with one twist. It is a grid that is being tabbed through. I am thinking a solution would be to add a hidden field on the screen that falls after the grid in the tab order and if they tab out of the grid to that field, throw them back up to the first field in the screen. Do you know of a better way to do this?
Re: Tabbing through browser address bar
Posted: Thu Jan 18, 2018 3:55 pm
by Scott Klement
I'd do it the same way I outlined above, except I'd check the "id" of the field to determine the row number, and only take action if it's the last row on the display.
As for your idea of a "hidden field"... if you mean visibility=hidden, it won't tab into it.
Re: Tabbing through browser address bar
Posted: Thu Jan 18, 2018 3:59 pm
by pjshuey
I just realized that! I will do it your way ;) Thanks!
Re: Tabbing through browser address bar
Posted: Tue Jan 23, 2018 12:21 pm
by pjshuey
Scott,
I am struggling with this because it is a grid. I have the code working so that if I tab through the grid fields, when I reach the last field in the last row and tab it will take me to the next page. When I get to the end of the grid it will take me back to the first page. What I can't get working is for it to set the focus on the first entry field in the grid when I tab to the next page. The error I get is "Cannot read property 'focus' of null". Is there a way to do this?
function handleKey(event) {
// get the key code (cross-browser)
event = event || window.event;
var code = event.which || event.keyCode;
var lastRow = row/17; // Grid has 17 rows/page
var count = getObj("SFDATA").grid.getRecordCount();
// if code=9 (tab) and on last row of grid (17), roll to next page
if (code == 9) {
if (Number.isInteger(lastRow) || (row == count)) {
// if last row of grid
if (row == count) {
row = 0;
}
row = row+1;
// Set grid to top of next page
getObj("SFDATA").grid.scrollToRow(row);
// Set focus on first cell in grid
getObj("LNKOPT" + '.' + row).focus();
}
}
}
handleKey
Re: Tabbing through browser address bar
Posted: Tue Jan 23, 2018 10:13 pm
by Megan
Hello pjshuey,
We could use some additional information to continue investigating your issue. Could you please send us a copy of your display file, which you can do by saving the display file locally, or could you send us a screen dump of the page with the the grid in question, which you can do by pressing CTRL + F9 while viewing the page? You can send the file to us at
support@profoundlogic.com. This additional information will help us investigate this issue further.
Thank you,
Megan
Re: Tabbing through browser address bar
Posted: Wed Jan 24, 2018 11:00 am
by pjshuey
Attached is the json for my screen. Everything works great except that when I tab from the last grid field and it displays the next page of the grid, it does not place focus on the first field of the grid. Let me know if I can give you any more information.
Re: Tabbing through browser address bar
Posted: Fri Feb 16, 2018 12:52 pm
by shuffman
Just browsing the forum. This is the group of functions we use. It is supposed to take you from the last input to the first input. I won't guarantee they will work in a different environment. It was written as a universal way to do this for all screens without having to make changes to them individually.
Code: Select all
window.addEventListener('load',function(){
setTimeout(function(){tabStopGrids();},100);
setTimeout(function(){tabStop();},100);
});
These are the required functions.
Notes: The crystal-grid class portion may need work in the grids functions. We typically only use this type of grid. Also, i do not recall what all of the different exceptions are in the get first and last input functions.
Code: Select all
function tabStop(){
setTimeout(function(){
var first = getFirstInput();
var last = getLastInput();
last.addEventListener("keydown",function(event){
var code = (event.keyCode ? event.keyCode : event.which);
if ((code == 9 || code == 107) && event.shiftKey == false){
if(event.currentTarget == getLastInput()){
event.preventDefault();
first.focus();
setTimeout(function(){first.focus();},0);
}else{
tabStop();
}
}
});
},10);
}
Code: Select all
function tabStopGrids(){
setTimeout(function(){
var grids = document.getElementsByClassName("crystal-grid");
for(var loopy = 0; loopy < grids.length; loopy++){
var grid = grids[loopy];
var currentScroll = grid.pui.properties["onscroll"];
if(!currentScroll){
currentScroll = '';
}
applyProperty(grid,"onscroll",currentScroll + ' tabStop(); ');
var currentPageUp = grid.pui.properties["onpageup"];
if(!currentPageUp){
currentPageUp = '';
}
applyProperty(grid,"onpageup",currentPageUp + ' tabStop(); ');
var currentPageDown = grid.pui.properties["onpagedown"];
if(!currentPageDown){
currentPageDown = '';
}
applyProperty(grid,"onpagedown",currentPageDown + ' tabStop(); ');
}
},10);
}
Code: Select all
function getFirstInput(){
var inputs = document.querySelectorAll('input,select,textarea')
var first;
for(var loopy = 0; loopy < inputs.length; loopy++){
var input = inputs[loopy];
if(input.className.search("pui-find-filter-box") > -1){
continue;
}
if(input.readOnly == true){
continue;
}
if(input.id == "messageSubfileMessages"){
continue;
}
if(input.tabIndex == -1){
continue;
}
if(input.style.visibility == 'hidden'){
continue;
}
if(input.style.display == 'none'){
continue;
}
first = input;
break;
}
return first;
}
Code: Select all
function getLastInput(){
var last;
var inputs = document.querySelectorAll('input,select,textarea')
for(var loopy = (inputs.length-1); loopy>=0 ; loopy--){
var input = inputs[loopy];
if(input.id.search("problem") > -1){
continue;
}
if(input.className.search("pui-find-filter-box") > -1){
continue;
}
if(input.readOnly == true){
continue;
}
if(input.id == "messageSubfileMessages" || input.id == "copyGridTextArea"){
continue;
}
if(input.tabIndex == -1){
continue;
}
if(input.style.visibility == 'hidden'){
continue;
}
if(input.style.display == 'none'){
continue;
}
if(input.type == 'radio'){
if(inputs[loopy-1].name == input.name && input.checked == false){
continue;
}
}
last = input;
break;
}
return last;
}