Google Answers Logo
View Question
 
Q: Javascript keyboard data entry code ( Answered 5 out of 5 stars,   0 Comments )
Question  
Subject: Javascript keyboard data entry code
Category: Computers > Programming
Asked by: linuxgeek-ga
List Price: $50.00		 Posted: 02 Dec 2003 18:44 PST
Expires: 01 Jan 2004 18:44 PST
Question ID: 282881 
I need to be able to add javascript code to an html form to enable a
keyboard controlled "data entry" system. Here is what I would like
specifically.

I have form/table with rows of radio buttons, each representing a
number for input. I want the user to be able to have the focus on the
first row. By hitting the number on the keypad that button will be
selected and the focus will then move to the next row, and so on.

Preferably, I would like a button that would activate/de-activate the
javascript, so the user could get out of the automated data entry.

The best implementation would be taking this sample html table form
and putting in the necessary javascript to do it. Go here for html
sample: http://daydream.stanford.edu/google_javascript.html

I could not find an example of this, but I have no reason to be
believe it's not possible. I do know java and html well, but very
little javascript. I would like to see this working, so either a
simple web page that does this with the source code (a complex page
would be difficult to understand) or the provided html form with the
javascript added (preferred).
Clarification of Question by linuxgeek-ga on 03 Dec 2003 14:50 PST 
Just wanted to clarify the button to activate/de-activate the
javascript would be a bonus, but that's not the crux of what I'm
looking for.

Any questions I can answer? Is the amount sufficient for the level of
difficulty? My feeling is that this might take someone who knows
javascript and then could probably quickly crank it out. I thought a
search might prove fruitful, but I wasn't successful with that. A well
described, found, search result is OK for this  answer, but it may not
be able to be found with search engines. It's odd, cause I'm surely
not the first person who wants to do this.
Answer  
Subject: Re: Javascript keyboard data entry code
Answered By: joseleon-ga on 04 Dec 2003 15:37 PST
Rated:5 out of 5 stars		  
Hello, linuxgeek:

  I have written some javascript code that works in the way you want,
that is, when the page is loaded, it sets the focus to the first "no
reply" radiobutton and waits for a key, when it's pressed and it's a
number between 0 and 4, then, checks the appropiate option and sets
the focus to the next "no reply" radiobutton. I'm sure you will need
some adjustments, so feel free to request for any clarification, I
will work on this answer until you get what you need.
  
Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0051)http://daydream.stanford.edu/google_javascript.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2800.1276" name=GENERATOR>
<script language="JavaScript" type="text/JavaScript">
<!--
function setFocus(num)
{
	var f=document.hamdForm;
	switch(num)
	{
	case 1: f.reply1[0].checked=true; f.reply1[0].focus(); break;
	case 2: f.reply2[0].checked=true; f.reply1[0].focus(); break;
	case 3: f.reply3[0].checked=true; f.reply1[0].focus(); break;
	}
}

function setOption(num,opt)
{
	var f=document.hamdForm;
	switch(num)
	{
	case 1: f.reply1[opt].checked=true; break;
	case 2: f.reply2[opt].checked=true; break;
	case 3: f.reply3[opt].checked=true; break;
	}
}

function getFocused()
{
	var f=document.hamdForm;
	
	if (f.reply1[0].checked) return(1);
	else if (f.reply2[0].checked) return(2);
	else if (f.reply3[0].checked) return(3);
}

IE4 = (document.all);
NS4 = (document.layers);

if (NS4) document.captureEvents(Event.KEYPRESS);
document.onkeypress = doKey;

function doKey(e) {
  whichASC = (NS4) ? e.which : event.keyCode;

    if ((whichASC>=48) && (whichASC<=52))
	{
		row=getFocused();
		setOption(row,whichASC-47);
		setFocus(row+1);
	}
}

//-->
</script>
</HEAD>
<BODY onLoad="setFocus(1)">
<FORM name=hamdForm action=/apples/saveHamd.do method=post><INPUT type=hidden 
value=3316dae217ce99d8b957022a5e1b5e3 name=org.apache.struts.taglib.html.TOKEN> 
<TABLE cellSpacing=1 cellPadding=4 width="50%" border=1>
  <TBODY>
  <TR>
    <TD align=middle width="40%" bgColor=#003366><B><FONT 
      color=#ffffff>Question</FONT></B></TD>
    <TD align=middle width="20%" bgColor=#003366><B><FONT color=#ffffff>No 
      Reply</FONT></B></TD>
    <TD align=middle width="40%" bgColor=#003366 colSpan=5><B><FONT 
      color=#ffffff>Reply</FONT></B></TD></TR>
  <TR bgColor=#dedede width="100%">
    <TH align=left>Question1 </TH>
    <TD align=middle bgColor=gray><INPUT name=reply1 type=radio value=-1> </TD>
    <TD align=middle><INPUT name=reply1 type=radio value=0>0 </TD>
    <TD align=middle><INPUT name=reply1 type=radio value=1>1 </TD>
    <TD align=middle><INPUT type=radio value=2 name=reply1>2 </TD>
    <TD align=middle><INPUT type=radio value=3 name=reply1>3 </TD>
    <TD align=middle><INPUT type=radio value=4 name=reply1>4 </TD></TR>
  <TR bgColor=#efefef width="100%">
    <TH align=left>Question2 </TH>
    <TD align=middle bgColor=gray><INPUT type=radio value=-1 name=reply2> </TD>
    <TD align=middle><INPUT type=radio value=0 name=reply2>0 </TD>
    <TD align=middle><INPUT type=radio value=1 name=reply2>1 </TD>
    <TD align=middle><INPUT type=radio value=2 name=reply2>2 </TD>
    <TD align=middle><INPUT type=radio value=3 name=reply2>3 </TD>
    <TD align=middle><INPUT type=radio value=4 name=reply2>4 </TD></TR>
  <TR bgColor=#dedede width="100%">
    <TH align=left>Question3 </TH>
    <TD align=middle bgColor=gray><INPUT type=radio value=-1 name=reply3> </TD>
    <TD align=middle><INPUT type=radio value=0 name=reply3>0 </TD>
    <TD align=middle><INPUT type=radio value=1 name=reply3>1 </TD>
    <TD align=middle><INPUT type=radio value=2 name=reply3>2 </TD>
    <TD align=middle><INPUT type=radio value=3 name=reply3>3 </TD>
    <TD align=middle><INPUT type=radio value=4 name=reply3>4 
</TD></TR></TBODY></TABLE></FORM></BODY></HTML>

Be aware of word wrapping when copying and pasting, I hope this is
what you are looking for and don't hesitate to request for any
clarification.

Regards.
Request for Answer Clarification by linuxgeek-ga on 04 Dec 2003 16:25 PST 
Excellent job on the coding. I am very pleased with how concise and
straight-forward the code was.

I tried it in IE and it works, but I also tried it in Netscape 4.79
and Mozilla in Linux and it didn't work.

Is that a simple adjustment? It looks like you had code in there to
assign keypresses a little differently in NS versus IE. Could you
clarify that a little?

I'm sure you noticed that the "No Reply" represents "-1". Can I map a
key, like "delete" (or another key if that's simpler) to select the
"-1" radio button?

I am so happy with your original answer that I'd like to make the
follow-up questions a bonus.

Great Job!

Thanks.
Request for Answer Clarification by linuxgeek-ga on 04 Dec 2003 16:47 PST 
In my original question I mentioned if it was possible to have a
button that would turn off javascript for the page. Or would I need to
set a variable and in the code and check for that value and just not
do anything? That's not a big deal, just wanted to see if there was a
standard way to turn off javascript within javascript.

Thanks.
Request for Answer Clarification by linuxgeek-ga on 04 Dec 2003 17:20 PST 
Hi again.

I just wanted to let you know I figured out the Netscape/Mozilla
issue. I just took out the testing for NS4, which supposedly has a
buggy javascript implementation. I don't mind not having support for
it. I mainly just wanted Mozilla to work :)
Clarification of Answer by joseleon-ga on 05 Dec 2003 00:32 PST 
Hello, linuxgeek:

 The problem with mozilla lies in the Type Ahead feature added
recently, that captures all user keystrokes to provide shortcuts for
navigation/find, check out this article:

Find As You Type
http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html

Unfortunately there's no easy easy to deactivate it:

Find As You Type is currently part of the default install. To turn it off, use:

 user_pref ("accessibility.typeaheadfind", false);

Or, to remove it completely, find all files in your installation
subdirectories that match *typeaheadfind*, and delete those files.

In any case, I'm going to finish the script so it works completely in
IE, I'm going to try add cursor keys (up and down) and some DHTML to
highlight the current question so an user can answer the test by using
keys and set the active question.

After that I will focus on the mozilla problem, maybe setting the
focus somewhere makes key capture possible.

Again, request as many clarifications you need.

Regards.
Clarification of Answer by joseleon-ga on 05 Dec 2003 01:20 PST 
Hello, Linuxgeek:
  Here is the next release with the following improvements:
  
  -Selected question/row is highlighted, both using keys and using mouse
  -Pressing a key between 0 and 4, selects the appropiate option and
advances to the next row
  -To select the option No reply, press the Supr key
  -To advance to the next question, press the Enter key
  -To go backwards use the Backward key
  -You can disable automatic keystrokes by unchecking the top checkbox
  
Here is the code, feel free to request more features or ask anything:

-----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0051)http://daydream.stanford.edu/google_javascript.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2800.1276" name=GENERATOR>
<script language="JavaScript" type="text/JavaScript">
<!--
var row=0;
var maxrows=3;

function MSIEUnHighlightRow( rowNumber )
{
    var targetRow = eval( "document.all.q" + rowNumber );
    if ((rowNumber % 2)==0) targetRow.bgColor = "#efefef";
    else targetRow.bgColor = "#dedede";
}
function MSIEHighlightRow( rowNumber )
{
    var targetRow = eval( "document.all.q" + rowNumber );
    targetRow.bgColor = "lightsteelblue";
}


function setFocus(num)
{
	if ((num>=1) && (num<=maxrows))
	{
		if (row!=0) MSIEUnHighlightRow(row);
		row=num;
		MSIEHighlightRow(row);	

		/*
		var f=document.hamdForm;
		switch(num)
		{
			case 1: f.reply1[0].checked=true; f.reply1[0].focus(); break;
			case 2: f.reply2[0].checked=true; f.reply1[0].focus(); break;
			case 3: f.reply3[0].checked=true; f.reply1[0].focus(); break;
		}
		*/
	}
}

function setOption(num,opt)
{
	var f=document.hamdForm;
	switch(num)
	{
	case 1: f.reply1[opt].checked=true; break;
	case 2: f.reply2[opt].checked=true; break;
	case 3: f.reply3[opt].checked=true; break;
	}
}

function getFocused()
{
	return(row);
}

IE4 = (document.all);
NS4 = (document.layers);

if (NS4) document.captureEvents(Event.KEYPRESS);
document.onkeydown = doKey;

function doKey(e) {
	if (document.hamdForm.jsenabled.checked)
	{
  		whichASC = (NS4) ? e.which : event.keyCode;

		if ((whichASC>=48) && (whichASC<=52))
    		{
			row=getFocused();
			setOption(row,whichASC-47);
			setFocus(row+1);
    		}
    		else if (whichASC==46)
    		{
			row=getFocused();
			setOption(row,0);
			setFocus(row+1);
    		}    
    		else if (whichASC==13)
    		{
			row=getFocused();
			setFocus(row+1);    
    		}
    		else if (whichASC==8)
    		{
			row=getFocused();
			setFocus(row-1);    
    		}
	}
}

//-->
</script>
</HEAD>
<BODY onLoad="setFocus(1)">
<FORM name=hamdForm action=/apples/saveHamd.do method=post>
<input type="checkbox" name="jsenabled" checked>Enable JS<br>
<INPUT type=hidden value=3316dae217ce99d8b957022a5e1b5e3
name=org.apache.struts.taglib.html.TOKEN>
<TABLE cellSpacing=1 cellPadding=4 width="50%" border=1>
  <TBODY>
  <TR>
    <TD align=middle width="40%" bgColor=#003366><B><FONT 
      color=#ffffff>Question</FONT></B></TD>
    <TD align=middle width="20%" bgColor=#003366><B><FONT color=#ffffff>No 
      Reply</FONT></B></TD>
    <TD align=middle width="40%" bgColor=#003366 colSpan=5><B><FONT 
      color=#ffffff>Reply</FONT></B></TD></TR>
  <TR id="q1" bgColor=#dedede width="100%">
    <TH align=left>Question1 </TH>
    <TD align=middle bgColor=gray><INPUT name=reply1 type=radio
onclick="setFocus(1)" checked value=-1> </TD>
    <TD align=middle><INPUT name=reply1 type=radio value=0
onclick="setFocus(1)">0 </TD>
    <TD align=middle><INPUT name=reply1 type=radio value=1
onclick="setFocus(1)">1 </TD>
    <TD align=middle><INPUT type=radio value=2 name=reply1
onclick="setFocus(1)">2 </TD>
    <TD align=middle><INPUT type=radio value=3 name=reply1
onclick="setFocus(1)">3 </TD>
    <TD align=middle><INPUT type=radio value=4 name=reply1
onclick="setFocus(1)">4 </TD></TR>
  <TR id="q2" bgColor=#efefef width="100%">
    <TH align=left>Question2 </TH>
    <TD align=middle bgColor=gray><INPUT type=radio value=-1
onclick="setFocus(2)" checked name=reply2> </TD>
    <TD align=middle><INPUT type=radio value=0 name=reply2
onclick="setFocus(2)">0 </TD>
    <TD align=middle><INPUT type=radio value=1 name=reply2
onclick="setFocus(2)">1 </TD>
    <TD align=middle><INPUT type=radio value=2 name=reply2
onclick="setFocus(2)">2 </TD>
    <TD align=middle><INPUT type=radio value=3 name=reply2
onclick="setFocus(2)">3 </TD>
    <TD align=middle><INPUT type=radio value=4 name=reply2
onclick="setFocus(2)">4 </TD></TR>
  <TR id="q3" bgColor=#dedede width="100%">
    <TH align=left>Question3 </TH>
    <TD align=middle bgColor=gray><INPUT type=radio value=-1
onclick="setFocus(3)" checked name=reply3> </TD>
    <TD align=middle><INPUT type=radio value=0 name=reply3
onclick="setFocus(3)">0 </TD>
    <TD align=middle><INPUT type=radio value=1 name=reply3
onclick="setFocus(3)">1 </TD>
    <TD align=middle><INPUT type=radio value=2 name=reply3
onclick="setFocus(3)">2 </TD>
    <TD align=middle><INPUT type=radio value=3 name=reply3
onclick="setFocus(3)">3 </TD>
    <TD align=middle><INPUT type=radio value=4 name=reply3 onclick="setFocus(3)">4 
</TD></TR></TBODY></TABLE></FORM></BODY></HTML>
-----
Regards.
Request for Answer Clarification by linuxgeek-ga on 05 Dec 2003 14:19 PST 
Impressive addition!

With a little work I made it compliant with Mozilla. It's probably a
little awkward what I tried to do, but it does work. I also changed
the keycodes to use the numberpad. Web page is here:
http://daydream.stanford.edu/javascript_google_answer_mozilla.html

My preference is to be compliant to the javascript standards and then
make changes to specific browsers. IE pretty much follows the standard
and their own standards, so usually FWIK you can use the standard and
IE is mostly compliant with that.

BTW, the back button doesn't work in IE6 because it will activate the
back button and take you to the previous web page. It's probaby better
to just use a different button, which is easy enough to do given your
code.

Everything works in Mozilla, at least in Mozilla 1.5, but it does give
a beep error cause it tried to do typeahead. I could turn typeahead
off by unchecking the box in Edit->Preferences->Advanced->Keyboard
Navigation->Find As You Type. I'm completely happy with that solution.

What you propose for navigating the table would be useful but I would
need it to work also in Mozilla.

BTW, the full version of Mozilla has a javascript debugger, which made
it easier for me to realize the incompatibility.

If you don't want to make it compliant with Mozilla, that's fine. I'll
take it and try to adapt it later.

Thanks so much.
Clarification of Answer by joseleon-ga on 07 Dec 2003 15:28 PST 
Hello, linuxgeek:
  Thanks a lot for the generous tip and the rating!, I haven't had the
opportunity to answer your last request for clarification because here
in Spain we are enjoying a 3-day holiday so I haven't looked to your
question until now. I will take a look on monday and I will post the
fixed version.

Thanks again!
Clarification of Answer by joseleon-ga on 08 Dec 2003 09:13 PST 
Hello, linuxgeek:
  I have been checking your modifications with Netscape and Mozilla
and work superb, well done! Is there anything more you want from me on
this script?

Regards.
linuxgeek-ga rated this answer:5 out of 5 stars and gave an additional tip of: $50.00 
Everything works great and thanks so much for the answer. This answer
was concise and exactly what I needed. Couldn't be happier.

Comments  
There are no comments at this time.
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy