By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,968 Members | 1,871 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,968 IT Pros & Developers. It's quick & easy.

arrow keys in html form

100+
P: 170
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>
Aug 16 '09 #1
Share this Question
Share on Google+
4 Replies


RamananKalirajan
100+
P: 607
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
Aug 27 '09 #2

100+
P: 170
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)
Sep 5 '09 #3

acoder
Expert Mod 15k+
P: 16,027
The cursor position code is incorrect. See ths thread for a better script.
Sep 5 '09 #4

RamananKalirajan
100+
P: 607
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
Sep 7 '09 #5

Post your reply

Sign in to post your reply or Sign up for a free account.