arrow keys in html form

[beary]

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?

<table>
<tr>
<td><input type='text' id='1c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='1c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='1c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='2c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='2c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='2c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='3c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='3c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='3c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
 
<td><input type='text' id='4c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='4c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='4c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='5c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='5c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='5c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='6c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='6c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='6c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
</table>

<script language="javascript">
 
    function keyPressed(TB, e) 
    {
        if (e.keyCode == 40 || e.keyCode == 13) { // arrow down
            if (TB.split("c")[0] < 6)
            document.getElementById(eval(TB.split("c")[0] + '+1') + 'c' + TB.split("c")[1]).focus();
            if (TB.split("c")[0] == 6)
            document.getElementById(1 + 'c' + TB.split("c")[1]).focus();         
        }
 
        if (e.keyCode == 38) { // arrow up
            if(TB.split("c")[0] > 1)
            document.getElementById(eval(TB.split("c")[0] + '-1') + 'c' + TB.split("c")[1]).focus();
            if (TB.split("c")[0] == 1)
            document.getElementById(6 + 'c' + TB.split("c")[1]).focus();
        }
 
        if (e.keyCode == 37) { // arrow left
            if(TB.split("c")[1] > 1)
            document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '-1')).focus();            
            if (TB.split("c")[1] == 1)
            document.getElementById(TB.split("c")[0] + 'c' + 3).focus();
        }  
 
        if (e.keyCode == 39) { // arrow right
            if(TB.split("c")[1] < 3)
            document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '+1')).focus(); 
            if (TB.split("c")[1] == 3)
            document.getElementById(TB.split("c")[0] + 'c' + 1).focus();
        }                 
    }
 
</script>

[RamananKalirajan]

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

javascript:

<script language="javascript" type="text/javascript">
function GetCursorPosition() {
var obj = document.activeElement;
var cur = document.selection.createRange();
var pos = 0;
if (obj && cur) {
var tr = obj.createTextRange();
if (tr) {
while (cur.compareEndPoints("StartToStart", tr) > 0) {
tr.moveStart("character", 1);
pos++;
}
return pos;
}
}
return -1;
}
 
function moveDown(TB)
{
    if (TB.split("c")[0] < 6)
        document.getElementById(eval(TB.split("c")[0] + '+1') + 'c' + TB.split("c")[1]).focus();
    if (TB.split("c")[0] == 6)
        document.getElementById(1 + 'c' + TB.split("c")[1]).focus();  
}
 
function moveUp(TB)
{
    if(TB.split("c")[0] > 1)
        document.getElementById(eval(TB.split("c")[0] + '-1') + 'c' + TB.split("c")[1]).focus();
    if (TB.split("c")[0] == 1)
        document.getElementById(6 + 'c' + TB.split("c")[1]).focus();
}
 
function moveLeft(TB){
    if(TB.split("c")[1] > 1)
        document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '-1')).focus();            
    if (TB.split("c")[1] == 1)
        document.getElementById(TB.split("c")[0] + 'c' + 3).focus();
}
 
function moveRight(TB){
    if(TB.split("c")[1] < 3)
        document.getElementById(TB.split("c")[0] + 'c' + eval(TB.split("c")[1] + '+1')).focus(); 
    if (TB.split("c")[1] == 3)
        document.getElementById(TB.split("c")[0] + 'c' + 1).focus();
}
 
 
function keyPressed(TB,e) 
{
 
    if (e.keyCode == 40 || e.keyCode == 13) { // arrow down
        moveDown(TB,e);       
    }
 
    if (e.keyCode == 38) { // arrow up
        moveUp(TB)
    }
 
    if (e.keyCode == 37) { // arrow left
       try
       {
        var val = document.getElementById(TB).value;
        var myFlag=0;
            if(val!=null&&val!='undefined')
            {
               if(val.length!=GetCursorPosition())
                    myFlag=1;
 
               if(val.length==GetCursorPosition())
               {
                    myFlag=0;
                }
 
                if(0!=GetCursorPosition())
                    myFlag=1;
 
                if(0==GetCursorPosition())
                    myFlag=0;
            }
            if(myFlag!=1)
                moveLeft(TB)
        }
        catch(e)
        {
            alert(e.message);
        }
    }  
 
    if (e.keyCode == 39) { // arrow right
        try
       {
        var val = document.getElementById(TB).value;
        var myFlag=0;
            if(val!=null&&val!='undefined')
            {
               if(0!=GetCursorPosition())
                    myFlag=1;
                if(0==GetCursorPosition())
                    myFlag=0;
                if(val.length!=GetCursorPosition())
                    myFlag=1;
               if(val.length==GetCursorPosition())
               {
                    myFlag=0;
                }
            }
            if(myFlag!=1)
                moveRight(TB)
        }
        catch(e)
        {
            alert(e.message);
        }
    }                 
}
</script>

HTML Code

<table>
<tr>
<td><input type='text' id='1c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='1c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='1c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='2c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='2c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='2c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='3c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='3c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='3c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='4c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='4c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='4c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='5c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='5c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='5c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
<tr>
<td><input type='text' id='6c1' value='' onkeydown='keyPressed(this.id,event)'/></td>
<td><input type='text' id='6c2' value='' onkeydown='keyPressed(this.id,event)'/></td>
 <td><input type='text' id='6c3' value='' onkeydown='keyPressed(this.id,event)'/></td>
</tr>
</table>

Thanks and Regards
Ramanan Kalirajan

[beary]

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]

The cursor position code is incorrect. See ths thread for a better script.

[RamananKalirajan]

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