Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

arrow keys in html form

Familiar Sight
  
Join Date: Nov 2006
Posts: 161
#1: Aug 16 '09
Hi

Being tested using FF 3 on WAMP server. I have spent a number of hours trying to figure this out myself.

I have a html form using table cells and had a request to enable the arrow keys on a keyboard to move through the cells. I found some code and adapted it, and it works well now. Arrow keys move the cursor exactly to the correct cell. There are two things I can't do which I was hoping you guys would give me some help on. I am a javascript novice and would be so grateful for some help.

I have posted the code below. My two questions are

1) If I arrow right, and there's some text in the next cell, the cursor lands at the end. How can I make it land at the beginning of the text? (Curiously, if I use IE8, the cursor seems to land at the beginning. I guess I'd like to force it to land at the beginning regardless of browser.)

2) Once the cursor is at the beginning of that cell with text in it, what modification should I make so that when I arrow right, the cursor moves through the text character by character rather than jumping to the next cell?



Expand|Select|Wrap|Line Numbers
  1. <table>
  2. <tr>
  3. <td><input type='text' id='1c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  4. <td><input type='text' id='1c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  5. <td><input type='text' id='1c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  6. </tr>
  7. <tr>
  8. <td><input type='text' id='2c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  9. <td><input type='text' id='2c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  10. <td><input type='text' id='2c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  11. </tr>
  12. <tr>
  13. <td><input type='text' id='3c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  14. <td><input type='text' id='3c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  15. <td><input type='text' id='3c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  16. </tr>
  17. <tr>
  18.  
  19. <td><input type='text' id='4c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  20. <td><input type='text' id='4c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  21. <td><input type='text' id='4c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  22. </tr>
  23. <tr>
  24. <td><input type='text' id='5c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  25. <td><input type='text' id='5c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  26. <td><input type='text' id='5c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  27. </tr>
  28. <tr>
  29. <td><input type='text' id='6c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  30. <td><input type='text' id='6c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  31. <td><input type='text' id='6c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  32. </tr>
  33. </table>
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3.     function keyPressed(TB, e) 
  4.     {
  5.         if (e.keyCode == 40 || e.keyCode == 13) { // arrow down
  6.             if (TB.split("c")[0] < 6)
  7.             document.getElementById(eval(TB.split("c")[0] + '+1') + 'c' + TB.split("c")[1]).focus();
  8.             if (TB.split("c")[0] == 6)
  9.             document.getElementById(1 + 'c' + TB.split("c")[1]).focus();         
  10.         }
  11.  
  12.         if (e.keyCode == 38) { // arrow up
  13.             if(TB.split("c")[0] > 1)
  14.             document.getElementById(eval(TB.split("c")[0] + '-1') + 'c' + TB.split("c")[1]).focus();
  15.             if (TB.split("c")[0] == 1)
  16.             document.getElementById(6 + 'c' + TB.split("c")[1]).focus();
  17.         }
  18.  
  19.         if (e.keyCode == 37) { // arrow left
  20.             if(TB.split("c")[1] > 1)
  21.             document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '-1')).focus();            
  22.             if (TB.split("c")[1] == 1)
  23.             document.getElementById(TB.split("c")[0] + 'c' + 3).focus();
  24.         }  
  25.  
  26.         if (e.keyCode == 39) { // arrow right
  27.             if(TB.split("c")[1] < 3)
  28.             document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '+1')).focus(); 
  29.             if (TB.split("c")[1] == 3)
  30.             document.getElementById(TB.split("c")[0] + 'c' + 1).focus();
  31.         }                 
  32.     }
  33.  
  34. </script>
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#2: Aug 27 '09

re: arrow keys in html form

Hi,
I did some changes I found it to be working. Please post back if you have any problem in that

javascript:
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript" type="text/javascript">
  2. function GetCursorPosition() {
  3. var obj = document.activeElement;
  4. var cur = document.selection.createRange();
  5. var pos = 0;
  6. if (obj && cur) {
  7. var tr = obj.createTextRange();
  8. if (tr) {
  9. while (cur.compareEndPoints("StartToStart", tr) > 0) {
  10. tr.moveStart("character", 1);
  11. pos++;
  12. }
  13. return pos;
  14. }
  15. }
  16. return -1;
  17. }
  18.  
  19. function moveDown(TB)
  20. {
  21.     if (TB.split("c")[0] < 6)
  22.         document.getElementById(eval(TB.split("c")[0] + '+1') + 'c' + TB.split("c")[1]).focus();
  23.     if (TB.split("c")[0] == 6)
  24.         document.getElementById(1 + 'c' + TB.split("c")[1]).focus();  
  25. }
  26.  
  27. function moveUp(TB)
  28. {
  29.     if(TB.split("c")[0] > 1)
  30.         document.getElementById(eval(TB.split("c")[0] + '-1') + 'c' + TB.split("c")[1]).focus();
  31.     if (TB.split("c")[0] == 1)
  32.         document.getElementById(6 + 'c' + TB.split("c")[1]).focus();
  33. }
  34.  
  35. function moveLeft(TB){
  36.     if(TB.split("c")[1] > 1)
  37.         document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '-1')).focus();            
  38.     if (TB.split("c")[1] == 1)
  39.         document.getElementById(TB.split("c")[0] + 'c' + 3).focus();
  40. }
  41.  
  42. function moveRight(TB){
  43.     if(TB.split("c")[1] < 3)
  44.         document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '+1')).focus(); 
  45.     if (TB.split("c")[1] == 3)
  46.         document.getElementById(TB.split("c")[0] + 'c' + 1).focus();
  47. }
  48.  
  49.  
  50. function keyPressed(TB,e) 
  51. {
  52.  
  53.     if (e.keyCode == 40 || e.keyCode == 13) { // arrow down
  54.         moveDown(TB,e);       
  55.     }
  56.  
  57.     if (e.keyCode == 38) { // arrow up
  58.         moveUp(TB)
  59.     }
  60.  
  61.     if (e.keyCode == 37) { // arrow left
  62.        try
  63.        {
  64.         var val = document.getElementById(TB).value;
  65.         var myFlag=0;
  66.             if(val!=null&&val!='undefined')
  67.             {
  68.                if(val.length!=GetCursorPosition())
  69.                     myFlag=1;
  70.  
  71.                if(val.length==GetCursorPosition())
  72.                {
  73.                     myFlag=0;
  74.                 }
  75.  
  76.                 if(0!=GetCursorPosition())
  77.                     myFlag=1;
  78.  
  79.                 if(0==GetCursorPosition())
  80.                     myFlag=0;
  81.             }
  82.             if(myFlag!=1)
  83.                 moveLeft(TB)
  84.         }
  85.         catch(e)
  86.         {
  87.             alert(e.message);
  88.         }
  89.     }  
  90.  
  91.     if (e.keyCode == 39) { // arrow right
  92.         try
  93.        {
  94.         var val = document.getElementById(TB).value;
  95.         var myFlag=0;
  96.             if(val!=null&&val!='undefined')
  97.             {
  98.                if(0!=GetCursorPosition())
  99.                     myFlag=1;
  100.                 if(0==GetCursorPosition())
  101.                     myFlag=0;
  102.                 if(val.length!=GetCursorPosition())
  103.                     myFlag=1;
  104.                if(val.length==GetCursorPosition())
  105.                {
  106.                     myFlag=0;
  107.                 }
  108.             }
  109.             if(myFlag!=1)
  110.                 moveRight(TB)
  111.         }
  112.         catch(e)
  113.         {
  114.             alert(e.message);
  115.         }
  116.     }                 
  117. }
  118. </script>
HTML Code

Expand|Select|Wrap|Line Numbers
  1. <table>
  2. <tr>
  3. <td><input type='text' id='1c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  4. <td><input type='text' id='1c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  5. <td><input type='text' id='1c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  6. </tr>
  7. <tr>
  8. <td><input type='text' id='2c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  9. <td><input type='text' id='2c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  10. <td><input type='text' id='2c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  11. </tr>
  12. <tr>
  13. <td><input type='text' id='3c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  14. <td><input type='text' id='3c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  15. <td><input type='text' id='3c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  16. </tr>
  17. <tr>
  18. <td><input type='text' id='4c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  19. <td><input type='text' id='4c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  20. <td><input type='text' id='4c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  21. </tr>
  22. <tr>
  23. <td><input type='text' id='5c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  24. <td><input type='text' id='5c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  25. <td><input type='text' id='5c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  26. </tr>
  27. <tr>
  28. <td><input type='text' id='6c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
  29. <td><input type='text' id='6c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
  30.  <td><input type='text' id='6c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
  31. </tr>
  32. </table>
Thanks and Regards
Ramanan Kalirajan
Familiar Sight
  
Join Date: Nov 2006
Posts: 161
#3: Sep 5 '09

re: arrow keys in html form

Hi RamananKalirajan

Thanks for your work on this. It's fantastic. It now works perfectly in IE. However, it doesn't work in FF, Safari, Chrome or Opera. I should note that the up/down arrowing works fine. It's the left/right arrowing that is the problem. Obviously I'd like to have it working in them too, or it won't be viable. I've included the error message for each browser below. If you know of a way to fix these I'd appreciate it.

FF3.5.2: document.selection is undefined

Chrome 2.0: cannot call method 'CreateRange' of undefined

Safari: Result of expression 'document.selection' [undefined] is not an object

Opera: Statement on line 9: Type mismatch (usually non-object value supplied where object required)
Backtrace:
Line 9 of inline#1 script in http://localhost/test3.php: In function GetCursorPosition
while (cur.compareEndPoints("StartToStart", tr) > 0) {
Line 98 of inline#1 script in http://localhost/test3.php: In function keyPressed
if(0!=GetCursorPosition())
Line 1 of function script
keyPressed(this.id,event)
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Sep 5 '09

re: arrow keys in html form

The cursor position code is incorrect. See ths thread for a better script.
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#5: Sep 7 '09

re: arrow keys in html form

Thanks Acoder. That link was really awesome. I got the solution for detecting cursor position in all the browsers. Thanks again

Thanks and Regards
Ramanan Kalirajan
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved