Tabbing through browser address bar

[pjshuey]

Is there a way to prevent tabbing from the last field on a screen into the browser's address bar?

[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.

[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?

[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.

[pjshuey]

I just realized that! I will do it your way ;) Thanks!

[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

[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

[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.

[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;
}