October 5th, 2008 by Robert
I learned something pretty cool last week. I fielded a request
from a client who wanted to be able to use the up and down arrows on his
keyboard to navigate a rather large form on the site I created for him.
I believed it was possible but I had never done it. So after doing
some research I figured out how to do it. Below is a simplistic version
(put your cursor in one of the text boxes below and push the up or down
arrow keys to move between them):
| 1-1 | 1-2 | 1-3 | |||
| 2-1 | 2-2 | 2-3 | |||
| 3-1 | 3-2 | 3-3 |
The HTML for the simple table is as follows:
The javascript function used is as follows:
In my code I generate the HTML using PHP so when I pass the number of records to the checkKey function (3 in this example) it is the number of rows returned from a database query, and the current row for any given row of the table is the counter in a loop I use to print the table.
By the way, if you want to allow for the left and right arrows to move left and right in a form, you can do that by expanding the checkKey function to look for key code 37 (left arrow) and key code 39 (right arrow), and you’ll need to implement a column ordering scheme (like the counter I used for the rows) so you’ll know where to take the cursor.
Four Direction Code
(submitted by Mr Arrows below, but the comment fields do not accept code
so I put it in the main post. I actually had trouble putting two
working code samples in the same post so I just updated the main example
above to include the left and right arrows)
What if there are values in each field?
- These two javascript functions need to be defined, which will tell
you the index of the start of the current selection and the end of the
current selection (which will be the same if nothing is selected and you
just have a blinking cursor in the input box). They both take as input
the same object (called o below) that is passed into checkKey as the
last param (called myObj there):
01.function getSelectionStart(o) {02.if (o.createTextRange) {03.var r = document.selection.createRange().duplicate();04.r.moveEnd('character', o.value.length);05.if (r.text == '') return o.value.length;06.return o.value.lastIndexOf(r.text);07.} else return o.selectionStart;08.}09.10.function getSelectionEnd(o) {11.if (o.createTextRange) {12.var r = document.selection.createRange().duplicate();13.r.moveStart('character', -o.value.length);14.return r.text.length;15.} else return o.selectionEnd;16.}
- Then you need to define some variables inside the checkKey function,
to get the current input value and the index of the cursor position
within that value:
1.var inputVal = myObj.value,2.startIndex = getSelectionStart(myObj);3.endIndex = getSelectionEnd(myObj);
I only use startIndex because it will be the same as endIndex when nothing is highlighted or selected in the input box.
- Next you can use a simple regular expression (or any other string
function you want) to see if there is any text before (for the left
arrow condition) or after (for the right arrow condition) the cursor.
For example, this is the code I use when when the left arrow has been
pressed:
01.var testBC = inputVal.substring(0, startIndex);02.var blankRE=/^s*$/;03.//alert("beforeCursor is '"+testBC+"');04.// if the regular expression test passes, then there is nothing to the left and we can move cells05.if (blankRE.test(testBC)) {06.var nextField = document.getElementById(columns[colIndex-1]+String(myRow));07.nextField.focus();08.//If we are moving into a select dropdown, restore the previously selected value half a second after it switches to the first or last option (I don't know how to prevent that, so this is my workaround):09.if (nextField.tagName=="SELECT") {10.var cur_ind = nextField.options.selectedIndex;11.var cur_val = nextField.options[nextField.options.selectedIndex].value;12.var cur_text = nextField.options[nextField.options.selectedIndex].text;13.setTimeout(function(){nextField.options.selectedIndex=cur_ind}, 5);14.}15.return false;16.}
+++++++++++++++++++++++++++++++
兄弟作一录入界面，里面有很多行textbox,每行5个，为录入方便（有的textbox可能这次不录入，数据为0），要求实现用上下左右箭头键在textbox中实现光标的快速跳转，即敲下箭头键光标就直接跳入下一行对应的textbox,其余上、左、右以此类推。
请问各位大哥如何实现？
+++++++++++++++++++++++++++++++
try something like the following:
<script language=javascript>
var n = 4;
function document.onkeydown()
{
//alert(event.keyCode);
var e = event.srcElement;
var c = event.keyCode;
switch(c)
{
case 37: //left
moveCursor(e,-1);
break;
case 38: //up
moveCursor(e,-n);
break;
case 39: //right
moveCursor(e,1);
break;
case 40: //down
moveCursor(e,n);
break;
}
}
function moveCursor(e,n)
{
var i = e.sourceIndex;
var sign = n > 0? 1 : -1;
n = Math.abs(n);
i=i+sign*1;
while ( i > =0 && i < document.all.length)
{
e = document.all[i];
if (e.tagName == "INPUT " && e.type == "text ")
{
n--;
if (n==0)
break;
}
i=i+sign*1;
}
if ( i > = 0 && i < document.all.length && n==0)
document.all[i].focus();
}
</script>