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>

[CODE=javascript]
<script language="javas cript">

function keyPressed(TB, e)
{
if (e.keyCode == 40 || e.keyCode == 13) { // arrow down
if (TB.split("c")[0] < 6)
document.getEle mentById(eval(T B.split("c")[0] + '+1') + 'c' + TB.split("c")[1]).focus();
if (TB.split("c")[0] == 6)
document.getEle mentById(1 + 'c' + TB.split("c")[1]).focus();
}

if (e.keyCode == 38) { // arrow up
if(TB.split("c" )[0] > 1)
document.getEle mentById(eval(T B.split("c")[0] + '-1') + 'c' + TB.split("c")[1]).focus();
if (TB.split("c")[0] == 1)
document.getEle mentById(6 + 'c' + TB.split("c")[1]).focus();
}

if (e.keyCode == 37) { // arrow left
if(TB.split("c" )[1] > 1)
document.getEle mentById(TB.spl it("c")[0] + 'c' + eval(TB.split(" c")[1] + '-1')).focus();
if (TB.split("c")[1] == 1)
document.getEle mentById(TB.spl it("c")[0] + 'c' + 3).focus();
}

if (e.keyCode == 39) { // arrow right
if(TB.split("c" )[1] < 3)
document.getEle mentById(TB.spl it("c")[0] + 'c' + eval(TB.split(" c")[1] + '+1')).focus();
if (TB.split("c")[1] == 3)
document.getEle mentById(TB.spl it("c")[0] + 'c' + 1).focus();
}
}

</script>[/CODE]

[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 RamananKaliraja n

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.select ion is undefined

Chrome 2.0: cannot call method 'CreateRange' of undefined

Safari: Result of expression 'document.selec tion' [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 GetCursorPositi on
while (cur.compareEnd Points("StartTo Start", tr) > 0) {
Line 98 of inline#1 script in http://localhost/test3.php: In function keyPressed
if(0!=GetCursor Position())
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