RE: JavaScript to navigate around data entry input forms... SOLVE D
Don't know if anyone's interested, but here's the JavaScript (and apologies
in advance if you resent the OT).
The form grid is five text input columns wide by however many rows high
(dynamically determined). It's coded so that it skips the last column (so in
col 4, pressing right takes you to col 1 on the same row). Not fantastic,
but, hey, it works and the JavaScript book you all recommended hasn't
arrived yet ;-)
The most clunky bit is that I couldn't figure out how to pass to the
function the value of that input's position in the array, so it passes back
it's name instead. Then, moveCursor iterates through
document.forms[0].elements to see which name matches what was passed and
stores that array value.
BTW, anyone know how to do that? Would it be something like
"document.forms[0].elements[this]" ?
And only tested in IE5 so far.
In the text input boxes, put this:
onKeyDown="moveCursor(event.keyCode, this.name);"
And paste this into the HEAD:
// This JavaScript allows the user to navigate around a
// grid-like matrix of form fields using the arrow keys.
// It assumes there are buttons at the end of the form.
function moveCursor(keyCode, inputName) {
// The number of cells wide in the form.
var width = 5;
// The number of submit and reset buttons at the end of the form.
var buttons = 2;
// Determine what element in the form object the cursor was in.
var element = 0;
for (i = 0; i < document.forms[0].elements.length; i++) {
if (document.forms[0].elements[i].name == inputName) {
var element = i;
}
}
// left arrow.
if (keyCode == 37) {
// if we're at the end of the row, wrap to the right
if ((element + 1) % width == 1) {
element = element + 3;
// otherwise, just go one to the left.
} else {
element--;
}
// up arrow
} else if (keyCode == 38) {
// if we're on the top row, wrap to the bottom.
if (element <= 4) {
element = width - element;
element = document.forms[0].elements.length - element - buttons;
// otherwise, just move one row up.
} else {
element = element - width;
}
// right arrow.
} else if (keyCode == 39) {
// if we're at the end of the row, wrap to the left
if ((element + 1) % width == 4) {
element = element - 3;
// otherwise, just go one to the right.
} else {
element++;
}
// down arrow.
} else if (keyCode == 40) {
// if we're on the bottom row, wrap to the top.
if (element >= document.forms[0].elements.length - (width + buttons))
{
element = document.forms[0].elements.length - element - buttons;
element = width - element;
// otherwise just move one row down.
} else {
element = element + width;
}
}
// Put focus on the new form input.
document.forms[0].elements[element].focus();
}
--
Aidan Whitehall <[EMAIL PROTECTED]>
Macromedia ColdFusion Developer
Fairbanks Environmental +44 (0)1695 51775
~~
Get the mailserver that powers this list at http://www.coolfusion.com
FAQ: http://www.thenetprofits.co.uk/coldfusion/faq
Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/
Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
RE: JavaScript to navigate around data entry input forms
A bit OT,(just an intellectual exercise for me...) but I'm curious as to why?? you are using arrow keys to navigate the fields? What is the user to do when they need to arrow key around inside a text box ??? Though I can understand moving around a big grid with Tab/ShiftTab can be a drag. At 11:50 AM 11/13/01 -, you wrote: >> The first thing raised is Cross Browser Compatibility - if >> you want it, then >> it'll increase your work no end > >No, that's OK. IE4+ is required to use this site. > > >> Anyways, without starting on code, the general principal is >> to capture all >> events and check for the arrow key presses, then you have to >> find out where >> the cursor currently is (you can't just assume) and move it >> in the correct >> direction > >Thanks. I think I'm starting to get a handle on it. > >I've used onKeyDown to return the name of the form input. I guess I also >need to return the key that was pressed to determine what form input to put >focus on. The thing that I'm not sure about is how to do that (think it >might related to something called "which") and then what to do if the form >field to which a key press should take the cursor doesn't exist (ie when the >cursor is on the far right hand side and you press the right arrow). > >Any pointers to sites dealing with this topic would be gratefully received. > > >-- >Aidan Whitehall <[EMAIL PROTECTED]> >Macromedia ColdFusion Developer >Fairbanks Environmental +44 (0)1695 51775 > > > ~~ Get the mailserver that powers this list at http://www.coolfusion.com FAQ: http://www.thenetprofits.co.uk/coldfusion/faq Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/ Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
RE: JavaScript to navigate around data entry input forms
At 11:50 AM 11/13/2001 +, you wrote: > > The first thing raised is Cross Browser Compatibility - if > > you want it, then > > it'll increase your work no end > >No, that's OK. IE4+ is required to use this site. Good, then now all you have to do is make is cross compatible with 4 versions :) ~~ Get the mailserver that powers this list at http://www.coolfusion.com FAQ: http://www.thenetprofits.co.uk/coldfusion/faq Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/ Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
RE: JavaScript to navigate around data entry input forms
> The first thing raised is Cross Browser Compatibility - if > you want it, then > it'll increase your work no end No, that's OK. IE4+ is required to use this site. > Anyways, without starting on code, the general principal is > to capture all > events and check for the arrow key presses, then you have to > find out where > the cursor currently is (you can't just assume) and move it > in the correct > direction Thanks. I think I'm starting to get a handle on it. I've used onKeyDown to return the name of the form input. I guess I also need to return the key that was pressed to determine what form input to put focus on. The thing that I'm not sure about is how to do that (think it might related to something called "which") and then what to do if the form field to which a key press should take the cursor doesn't exist (ie when the cursor is on the far right hand side and you press the right arrow). Any pointers to sites dealing with this topic would be gratefully received. -- Aidan Whitehall <[EMAIL PROTECTED]> Macromedia ColdFusion Developer Fairbanks Environmental +44 (0)1695 51775 ~~ Your ad could be here. Monies from ads go to support these lists and provide more resources for the community. http://www.fusionauthority.com/ads.cfm FAQ: http://www.thenetprofits.co.uk/coldfusion/faq Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/ Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
RE: JavaScript to navigate around data entry input forms
> I need to write some JavaScript to enable users to navigate around a form > that's 5 text inputs wide by up to about 30 inputs height by pressing the > arrow keys, as opposed to tabbing through them. > > Each form input is named differently using a regular naming convention. > > Does anyone have any pointers on how to go about writing something like > this? The first thing raised is Cross Browser Compatibility - if you want it, then it'll increase your work no end Anyways, without starting on code, the general principal is to capture all events and check for the arrow key presses, then you have to find out where the cursor currently is (you can't just assume) and move it in the correct direction Two words for you: good luck! Philip Arnold Director Certified ColdFusion Developer ASP Multimedia Limited T: +44 (0)20 8680 1133 "Websites for the real world" ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. ** ~~ Get the mailserver that powers this list at http://www.coolfusion.com FAQ: http://www.thenetprofits.co.uk/coldfusion/faq Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/ Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
