...

View Full Version : User wants to use arrow keys



ksridhar69
06-24-2002, 03:13 AM
User is entering the data in this form. and he wants to use arrow keys to go up and down. pl answer

<form name="testform" method="post" action="test.asp">
<table border=0>
<tr>
<td><input type="text" name="text1"></td>
<td><input type="text" name="text2"></td>
<td><input type="text" name="text3"></td>
<td><input type="text" name="text4"></td>
</tr>
<tr>
<td><input type="text" name="text4"></td>
<td><input type="text" name="text5"></td>
<td><input type="text" name="text6"></td>
<td><input type="text" name="text7"></td>
</tr>
<tr>
<td><input type="text" name="text8"></td>
<td><input type="text" name="text9"></td>
<td><input type="text" name="text10"></td>
<td><input type="text" name="text11"></td>
</tr>
<tr>
<td><input type="text" name="text11"></td>
<td><input type="text" name="text12"></td>
<td><input type="text" name="text13"></td>
<td><input type="text" name="text14"></td>
</tr>

</table>
</form>

JSgamer2049
05-20-2004, 03:08 PM
You'll need some stuff. First, set your script to read keyboard buttons. Note that this doesn't work for all keyboards. The keycode might be different, so try it out before you copy and paste.

document.onkeypress=keyDown
function keyDown()
{
if (event.keyCode == 30) {do_something} //Up Arrow
if (event.keyCode == 31) {do_something} //Down Arrow
}

Next, you have to have a script that finds which element is focused. Then it should move to the next element by using testform.some_element.focus() to put the user's insertion point in the newly focused element. Hope that helps.

jbot
05-20-2004, 03:32 PM
the up and down arrow keys are typically used for scrolling the page.

if you're going to use them for something else, like navigating the form then you should check that a form element has the focus so that the original functionality of the page isn't broken too much.

anyway, you don't even need to do this. if you use the tabIndex attribute in your form elements, the form's users can press tab to go down the form fields, and press shift-tab to go up the form.

the tabIndex attribute takes numeric values to set the order.

can't you just inform the client that this is easier and better in the scheme of things. :thumbsup:

immedicable
05-20-2004, 04:48 PM
here's a super crappy version that moves focus when pressing letter "d" - i got letter D and letter A figured out, but that's it - so if you keep it as is you have to make sure your users dont type anything with letter "d" ever goes it jumps right away :D



<html>
<head>
<script language="javascript">
var focusobj;
function dmove(k)
{
var code=-1
if(document.layers) code=k.which;
if(document.all) code=event.keyCode
if(code==100)
{
for (i=0;i<document.f.elements.length;i++)
{if (focusobj == document.f.elements[i])
{i++;
if (i>=document.f.elements.length) i=0;
document.f.elements[i].focus();
break;
}
}
}
}
function imatextfeild(obj)
{focusobj=obj;
}
if (document.layers)
{document.captureEvents(event.keypress);
}
document.onkeypress=dmove;
</script>
<head>


<body onload="focusobj=document.f.elements[0];">
<form name="f" id="f">
<input type="text" onFocus="imatextfeild(this);">
<input type="text" onFocus="imatextfeild(this);">
</form>
</body>
</html>


p.s. i didn't come up with that - i don't know who did, i found some scraps from a script i got a wihle back and did some very minor mods.

MikeFoster
05-20-2004, 05:03 PM
This little demo (http://cross-browser.com/x/examples/arrowkeys.html) might be helpful :)

sad69
05-21-2004, 01:44 AM
Hey that demo link was kinda cool! I was having some fun with it!

But I noticed a bug, if you hold the down arrow key so that it expands the screen down and starts scrolling, the cross-browser.com thing gets stuck down there.. it's funny to watch it go off the screen all over the place! :D

oops, nevermind, if you keep scrolling back up so that you shrink the page so there's no more scroll bar, the cross-browser.com thing comes back... still pretty freaked out though

Sadiq.

glenngv
05-21-2004, 04:46 AM
anyway, you don't even need to do this. if you use the tabIndex attribute in your form elements, the form's users can press tab to go down the form fields, and press shift-tab to go up the form.

the tabIndex attribute takes numeric values to set the order.

can't you just inform the client that this is easier and better in the scheme of things. :thumbsup:
I'm with jbot here.

MikeFoster
05-21-2004, 06:02 AM
Hi Sadiq, glad you liked my toy :)

Hi ksridhar69, altho a javascript solution would be more fun ;) I have to admit that I also agree with jbot.

JSgamer2049
05-22-2004, 08:04 PM
Geez. If you really want to do it the hard way with JavaScript, check this out: http://safari.oreilly.com/JVXSL.asp?xmlid=0-596-00467-2/jvdhtmlckbk-APP-B

It has keycodes for you to play with. I also believe tabIndex would be better, but who really cares? Its your web page and you can do what you want. I hope that helps.

brothercake
05-24-2004, 12:38 AM
but who really cares? Its your web page and you can do what you want.
Spoken like a true hobbyist ;)

Willy Duitt
05-24-2004, 01:48 AM
All that aside. It appears that JsGammer has drug this unanswered post up from two years ago. (06-23-2002, 09:13 PM)

liorean
05-24-2004, 01:58 AM
I blame it on GoogleBot. And Yahoo! Slurp. And MSNBot. And Zyborg Nutbot.

These forums were never spidered before, and now this is what catch the spiders get in their nets after invading.

elvie
05-24-2004, 12:40 PM
I agree that using the tabIndex is the simplest way, but not many people know that using shift-tab makes you go back, so I'm with ksridhar69 on this one,

I need the form to 'act like' a excel spreadsheet, or as close to one as possible. I know I'm not going to be able to get select>drag>copy functionality working within the form [can I?], but using the arrow keys to navigate the from is a must.

I'll see what I can come up with and post the results here for you guys to pick holes in [pretty new at JavaScript].

jbot
05-24-2004, 02:38 PM
I know I'm not going to be able to get select>drag>copy functionality working within the form [can I?]

you can. but because Moz doesn't support copy and paste operations without signed scripts, you'll need to hack together some clever DHTML to make it work. it's not difficult tho. just break it down into several steps and author functions or objects for each phase.

elvie
05-24-2004, 05:16 PM
you can. but because Moz doesn't support copy and paste operations without signed scripts, you'll need to hack together some clever DHTML to make it work. it's not difficult tho. just break it down into several steps and author functions or objects for each phase.

I can? do you know of any posts, tutorials that would give me some further points on this? I havenít got a clue where to start.

Thanks

jbot
05-24-2004, 05:41 PM
do you know of any posts, tutorials that would give me some further points on this?

er, not quite. the theory exists in my head as pseudo-code. basically, what you wanna do is:

(1) use getSelection (or equivalent) method to copy text to global variable or session-type object.
(2) display this in DHTML layer on dragstart
(3) on mousemove/layer drag, move layer to above other field
(4) on mouserelease, drop contents of layer into field.

it's something that i may have to do for our own app at some point, hence the theoretically understanding of how to do it. at the mo tho, i haven't got time to do it. hence no script for you to see. however, the points i've made above should point you in the right direction, hopefully :)

elvie
05-26-2004, 06:48 PM
Found this code on another forum that does exactly what the original post asked for...
url:http://www.webxpertz.net/forums/showthread.php?t=23877



<html lang="en">

<head>

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"/>

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


function checkKey(form){

var key = event.keyCode;
var inputElementName = event.srcElement.name;

var col = parseInt(inputElementName.substring( 3, inputElementName.indexOf('[') ));
var row = parseInt(inputElementName.substring( inputElementName.indexOf('[')+1, inputElementName.indexOf(']') ));

// if the up arrow has been pressed and we're not in the first row
if( key == 38 && row != 0) {
form.elements.item("day" + String(col) + "[" + String(row-1) + "]").focus();
return false;
}
// if the down arrow has been pressed and we're not in the last row
else if( key == 40 && row != 2) {
form.elements.item("day" + String(col) + "[" + String(row+1) + "]").focus();
return false;
}
// if the left arrow has been pressed and we're not in the leftmost column
else if( key == 37 && col != 1) {
form.elements.item("day" + String(col-1) + "[" + String(row) + "]").focus();
return false;
}
// if the right arrow has been pressed and we're not in the rightmost column
else if( key == 39 && col != 8) {
form.elements.item("day" + String(col+1) + "[" + String(row) + "]").focus();
return false;
}
//Added to stop user entering hours in a row with no engagement
else if (document.getElementById("engNo[" + String(row) + "]").value == "")
{
alert("No engagement has been entered in this row");
return false;
}
// don't allow any of non-numeric characters but do allow the tab key
else if ( (key<48||key>57) && key != 9)
{
return false;
}

return true;

} // end checkKey function


</script>

</head>





<body bgcolor="white">


<form name="timesheetForm" method="POST" action="/Time/timesheet.do">

<table border="0" cellpadding="0" cellspacing="0">



<tr>

<td class="engagementCell"> <input type="text" name="engNo[0]" maxlength="9" size="9" tabindex="-1" value="987654321" readonly="readonly" class="engagement"> </td>
<td class="engagementCell"> <input type="text" name="clientName[0]" maxlength="20" size="29" tabindex="-1" value="Client 1" readonly="readonly" class="engagement"> </td>
<td class="engagementCell"> <input type="text" name="engName[0]" maxlength="20" size="29" tabindex="-1" value="Engagement 1" readonly="readonly" class="engagement"> </td>
<td width = "22"></td>


<td class="weekdayHoursCell"> <input type="text" name="day1[0]" maxlength="3" size="3" tabindex="1" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day2[0]" maxlength="3" size="3" tabindex="2" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day3[0]" maxlength="3" size="3" tabindex="3" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day4[0]" maxlength="3" size="3" tabindex="4" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekendHoursCell"> <input type="text" name="day5[0]" maxlength="3" size="3" tabindex="5" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekendHoursCell"> <input type="text" name="day6[0]" maxlength="3" size="3" tabindex="6" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day7[0]" maxlength="3" size="3" tabindex="7" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day8[0]" maxlength="3" size="3" tabindex="8" value="" onkeydown="return checkKey(this.form)" > </td>

<td width = "22"></td>
<td width="31" class="totalHoursCell"> <input type="text" name="engTotal[0]" maxlength="4" size="4" tabindex="-1" value="" readonly="readonly" class="totalHours"> </td>
</tr>



<tr>

<td class="engagementCell"> <input type="text" name="engNo[1]" maxlength="9" size="9" tabindex="-1" value="987654322" readonly="readonly" class="engagement"> </td>
<td class="engagementCell"> <input type="text" name="clientName[1]" maxlength="20" size="29" tabindex="-1" value="Client 2" readonly="readonly" class="engagement"> </td>
<td class="engagementCell"> <input type="text" name="engName[1]" maxlength="20" size="29" tabindex="-1" value="Engagement 2" readonly="readonly" class="engagement"> </td>
<td width = "22"></td>


<td class="weekdayHoursCell"> <input type="text" name="day1[1]" maxlength="3" size="3" tabindex="16" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day2[1]" maxlength="3" size="3" tabindex="17" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day3[1]" maxlength="3" size="3" tabindex="18" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day4[1]" maxlength="3" size="3" tabindex="19" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekendHoursCell"> <input type="text" name="day5[1]" maxlength="3" size="3" tabindex="20" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekendHoursCell"> <input type="text" name="day6[1]" maxlength="3" size="3" tabindex="21" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day7[1]" maxlength="3" size="3" tabindex="22" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day8[1]" maxlength="3" size="3" tabindex="23" value="" onkeydown="return checkKey(this.form)" > </td>

<td width = "22"></td>
<td width="31" class="totalHoursCell"> <input type="text" name="engTotal[1]" maxlength="4" size="4" tabindex="-1" value="" readonly="readonly" class="totalHours"> </td>
</tr>



<tr>

<td class="engagementCell"> <input type="text" name="engNo[2]" maxlength="9" size="9" tabindex="-1" value="987654323" readonly="readonly" class="engagement"> </td>
<td class="engagementCell"> <input type="text" name="clientName[2]" maxlength="20" size="29" tabindex="-1" value="Client 3" readonly="readonly" class="engagement"> </td>
<td class="engagementCell"> <input type="text" name="engName[2]" maxlength="20" size="29" tabindex="-1" value="Engagement 3" readonly="readonly" class="engagement"> </td>
<td width = "22"></td>


<td class="weekdayHoursCell"> <input type="text" name="day1[2]" maxlength="3" size="3" tabindex="31" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day2[2]" maxlength="3" size="3" tabindex="32" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day3[2]" maxlength="3" size="3" tabindex="33" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day4[2]" maxlength="3" size="3" tabindex="34" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekendHoursCell"> <input type="text" name="day5[2]" maxlength="3" size="3" tabindex="35" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekendHoursCell"> <input type="text" name="day6[2]" maxlength="3" size="3" tabindex="36" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day7[2]" maxlength="3" size="3" tabindex="37" value="" onkeydown="return checkKey(this.form)" > </td>

<td class="weekdayHoursCell"> <input type="text" name="day8[2]" maxlength="3" size="3" tabindex="38" value="" onkeydown="return checkKey(this.form)" > </td>

<td width = "22"></td>
<td width="31" class="totalHoursCell"> <input type="text" name="engTotal[2]" maxlength="4" size="4" tabindex="-1" value="" readonly="readonly" class="totalHours"> </td>
</tr>


</table>


</form>
</center>


</body>
</html>



It didn't take me long to realise that netscape doesn't like the first line of the code:
var key = event.keyCode;

Have looked around, but can't find a fix for netscape, anybody have any hints to get this working in Netscape?

Thanks in advance

liorean
05-26-2004, 06:52 PM
Send event as the first argument to the function from the onevent attribute on the HTML, and add it in the formal parameters list of the function.

elvie
05-26-2004, 08:53 PM
Send event as the first argument to the function from the onevent attribute on the HTML, and add it in the formal parameters list of the function.

Thanks liorean,
But I'm pretty much a newbie at JavaScript, any hints as to achieve the above.

Thanks.

liorean
05-26-2004, 10:09 PM
Change
onkeydown="return checkKey(this.form)" to
onkeydown="return checkKey(event, this.form)" in the HTML.

Then you change
function checkKey(form){ to
function checkKey(event, form){ and change event.srcElement to (event.target||event.srcElement).

elvie
05-27-2004, 10:06 AM
Thanks liorean,

I've changed the following as you suggested in the script:
from:
function checkKey(form){
to:
function checkKey(event,form){

from:
var inputElementName = event.srcElement.id;
to:

var inputElementName = (event.target||event.srcElement).id;

and in the HTML:
from:
onkeydown="return checkKey(this.form)"
to:
onkeydown="return checkKey(event, this.form)"

It's still working for ie, but still no luck with Netscape?

liorean
05-27-2004, 01:33 PM
You're using the [object HTMLCollection].item method with a non-numerical value. According to the DOM, you have either [object HTMLCollection].item for numerical indices, or [object HTMLCollection].namedItem for string keys. So, try changing which you use, or use the bracket notation [object HTMLCollection][stringKeyOrNumericIndex].

elvie
05-27-2004, 04:59 PM
thanks for the help but I'm totally lost....

liorean
05-27-2004, 05:34 PM
I.e. try changing elements.item to elements.namedItem...

elvie
05-27-2004, 06:14 PM
Thanks for all your help, like magic it's now working!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum