Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Arrow Keys and Text Fields 1

Status
Not open for further replies.
feshangi

feshangi

MIS
Nov 24, 2004
265
US
I have an HTML page with a form which has 57 text fields.

19 Columns X 3 Rows.

Is it possible to jump between these text boxes with Arrow Keys?

I appriciate any comments on this.

Thanks,

Mike
 
Sort by date Sort by votes
I'm a freakin' code monster:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

function tabNext(e, prev, next) {
    switch(e.keyCode) {
        case 37:
	      document.forms['f'].elements[prev].focus();
          break;
        case 39:
	      document.forms['f'].elements[next].focus();
          break;
    }
	return false;
}

-->
</script>

<style type="text/css">

</style>

</head>

<body>
<form name="f">
  <input type="text" name="t1" onkeypress="return tabNext(event, '', 't2');" /><br />
  <input type="text" name="t2" onkeypress="return tabNext(event, 't1', 't3');" /><br />
  <input type="text" name="t3" onkeypress="return tabNext(event, 't2', 't4');" /><br />
  <input type="text" name="t4" onkeypress="return tabNext(event, 't3', 's');" /><br />
  <input type="submit" name="s" onkeypress="return tabNext(event, 't4', '');" />
</form>
</body>

</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thanks cLFlaVA for the code.

I removed "return false;" and when I press Up/Down arrows nothing is happens! Please advice.

Thanks
 
Upvote 0 Downvote
i guess i was working on further false assumptions that if it worked in FF it worked in IE.

I tested this in both:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>
<script language="javascript" type="text/javascript"><!--
function tabNext(e, prev, next) {
    if (!e) var e = window.event;
    switch(e.keyCode) {
        case 38:
          document.forms['f'].elements[prev].focus();
          break;
        case 40:
          document.forms['f'].elements[next].focus();
          break;
    }
}
--></script>
</head>
<body>
<form name="f">
  <input type="text" name="t1" onkeyup="tabNext(event, '', 't2');" /><br />
  <input type="text" name="t2" onkeyup="tabNext(event, 't1', 't3');" /><br />
  <input type="text" name="t3" onkeyup="tabNext(event, 't2', 't4');" /><br />
  <input type="text" name="t4" onkeyup="tabNext(event, 't3', 's');" /><br />
  <input type="submit" name="s" onkeyup="tabNext(event, 't4', '');" />
</form>
</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
can i go left and right with this if I add two more cases with [up] and [down]?
 
Upvote 0 Downvote
someone can probably help you with a regular expression, because this will only work for less than 11 rows and less than 11 columns.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>
<script language="javascript" type="text/javascript"><!--
function tabNext(e) {
    var src, nextRow, nextCol, curRow, curCol, coords;
    
    if (!e) var e = window.event;
    if (e.target) src = e.target;
	else if (e.srcElement) src = e.srcElement;
	if (src.nodeType == 3) // defeat Safari bug
		src = targ.parentNode;
    
    curRow = src.name.substr(1,1) * 1;
    curCol = src.name.substr(3,1) * 1;  
    
    switch(e.keyCode) {
        // left
        case 37:
            nextRow = curRow;
            nextCol = curCol - 1;
            break;
            
        // up
        case 38:
            nextRow = curRow - 1;
            nextCol = curCol;
            break;
            
        // right
        case 39:
            nextRow = curRow;
            nextCol = curCol + 1;
            break;
            
        // down
        case 40:
            nextRow = curRow + 1;
            nextCol = curCol;
            break;
    }
    //alert('r' + nextRow + 'c' + nextCol);
    if (e.keyCode > 36 && e.keyCode < 41)
        document.forms['f'].elements['r' + nextRow + 'c' + nextCol].focus();
}
--></script>
</head>
<body>
<form name="f">
<table><tr>
<td><input type="text" name="r1c1" onkeyup="tabNext(event);" /><br /></td>
<td><input type="text" name="r1c2" onkeyup="tabNext(event);" /><br /></td>
<td><input type="text" name="r1c3" onkeyup="tabNext(event);" /><br /></td>
</tr><tr>
<td><input type="text" name="r2c1" onkeyup="tabNext(event);" /><br /></td>
<td><input type="text" name="r2c2" onkeyup="tabNext(event);" /><br /></td>
<td><input type="text" name="r2c3" onkeyup="tabNext(event);" /><br /></td>
</tr><tr>
<td><input type="text" name="r3c1" onkeyup="tabNext(event);" /><br /></td>
<td><input type="text" name="r3c2" onkeyup="tabNext(event);" /><br /></td>
<td><input type="text" name="r3c3" onkeyup="tabNext(event);" /><br /></td>
</tr></table>
</form>
</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
843
lexer
lexer
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
765
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
865
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
404
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
515
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top