Capturing Keyboard Input When No Form is Apparent On Screen
It almost seems like magic. A screen with no form elements showing and you tell the visitor to type something.
There's a trick, of course. By using a frameset document, you can design a frames document with apparently only one pane.
But there is actually a "hidden" second frame that contains form text elements.
It's pushing the envelope a bit, since you must set up setTimeout() calls to "poll" repeatedly for any keystrokes that the user may have entered.
In the script which follows (comprised of the parent and two child documents) a simple guessing game is implemented.
You and the computer take turns guessing what number each of you is "thinking of". It's fair, since the computer must take a random number to "guess what number you are thinking of".
The link to get to the scripts follows the three textual copies here:
The Parent Document Script
s-30.htm (frameset)
<HTML><HEAD>
<TITLE>Formless Keyboard Input</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=0
BORDERCOLOR="white" ROWS="*,0">
<FRAME SRC="s50.htm"
SCROLLING="yes" NAME="main">
<FRAME SRC="s51.htm"
SCROLLING="no" NAME="control">
</FRAMESET>
</HTML>
The First Child Document
s50.htm ("main")
<HTML><BODY BGCOLOR="white">
<CENTER>
<FONT SIZE=5 COLOR="blue">
<IMG SRC="nr/c3.gif" WIDTH=100
HEIGHT=100 BORDER=0>
<P><B>Let's Play Guess a Number!
<P>I'm thinking of a number from 0 to 9
<P>Type a Number
<P>(Any Number)</B></FONT>
</BODY>
</HTML>
The Second Child Document
s51.htm ("control")
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
locnm=location.href
pos=locnm.indexOf("s51.htm");
locnm1=locnm.substring(0,pos);
var flgp=0;
var scop=0;
var scoc=0;
var xtst="";
var ctr=0;
var ctr1=0;
ns="0123456789";
ls="abcdefghijklmnopqrstuvwxyz";
function getKey(){
if (ctr<6){
document.ug.disp.focus();
xtst=document.ug.key.value
if (xtst.length>0){
doDisp();
}
else{
document.ug.key.focus();
setTimeout("getKey()",50);
}
}
else{
stp1=setTimeout("wrtOut1()",2000);
}
}
function doDisp(){
ctr++;
srand();
if (flgp!=1){
wrtCom();
}
else{
wrtPla();
}
}
function wrtCom(){
if (ns.indexOf(xtst)>-1){
parent.main.document.close();
parent.main.document.write("<BODY"
+" BGCOLOR='cyan'><CENTER>"
+"<TABLE WIDTH=400 BORDER=0><TR>"
+"<TD ALIGN=CENTER><IMG SRC"
+"='"+locnm1+"nr/c3.gif' HEIGHT=100 WID"
+"TH=100><BR><FONT SIZE=5 COLOR"
+"='red'><B>I Was Thinking of "+rec+", and"
+" you guessed "+xtst+".<P></TD></TR>");
doCalcc();
parent.main.document.write("<TR><TD>"
+"<FONT SIZE=5 COLOR='black'><BR>"
+" <IMG SRC='"+locnm1
+"nr/f.gif' HEIGHT=10 WIDTH="
+(scoc*10)+" BORDER=1> <B> My Score ("
+scoc+")<P> <IMG SRC='"
+locnm1+"nr/f.gif' HEIGHT=10 WIDTH="
+(scop*10)+" BORDER=1> Your Score ("
+scop+")</FONT"
+"><P></TD></TR><TR><TD ALIGN=CENTE"
+"R><FONT SIZE=5 COLOR='red'><B>"
+"<BR>Now you think of a Number "
+"and Type It...</FONT></TD></TR>"
+"</TABLE></BODY></HTML><P>");
flgp=1;
xtst="";
document.ug.key.value="";
document.ug.key.focus();
stp2=setTimeout("getKey()",1000);
}
else{
wrtOut();
}
}
function wrtPla(){
if (ns.indexOf(xtst)>-1){
parent.main.document.close();
parent.main.document.write("<BODY"
+" BGCOLOR='fuchsia'><CENTER><TABLE"
+" WIDTH=400 BORDER=0><TR><TD ALIGN"
+"=CENTER><IMG SRC='"+locnm1
+"nr/c3.gif' HEIGHT=100 WIDTH=100><BR>"
+"<FONT SIZE=5 COLOR='white'><B>You"
+" Were Thinking of "+xtst
+", and I guessed "+rec
+".</B></FONT><P></TD></TR>");
doCalcp();
parent.main.document.write("<TR><TD>"
+"<FONT SIZE=5 COLOR='black'><BR>"
+" <IMG SRC='"+locnm1
+"nr/f.gif' HEIGHT=10 WIDTH="+(scoc*10)
+" BORDER=1> <B> My Score ("+scoc
+")<P> <IMG SRC='"
+locnm1+"nr/f.gif' HEIGHT=10 WIDTH="
+(scop*10)
+" BORDER=1> Your Score ("
+scop+")</FONT><P></TD></TR><TR><T"
+"D ALIGN=CENTER><FONT SIZE=5 COLOR"
+"=white'><BR><B>");
if (ctr<6){
parent.main.document.write("Your tur"
+"n to guess the Number and Type It...");
}
if (ctr==6){
parent.main.document.write("</FONT>"
+"<P><FONT SIZE=5 COLOR='yellow'><B>"
+"Our Guessing Game is Done... "
+"Please Wait.");
}
parent.main.document.write("</FONT>"
+"</TD></TR></TABLE></BODY></HT"
+"ML><P>");
flgp=0;
xtst="";
document.ug.key.value="";
document.ug.key.focus();
stp3=setTimeout("getKey()",1000);
}
else{
wrtOut();
}
}
function wrtOut(){
parent.main.document.close();
parent.main.document.write("<BODY"
+" BGCOLOR='black'><CENTER>"
+"<P><FONT SIZE=6 COLOR='white'>Y"
+"ou Resent Authority, Don't You?"
+"<P>I Asked You to Type a Num"
+"ber...<P>But No-o-o!<P"
+">You had to type '"+xtst+"'!</FONT>");
ls="";
wrtOut2();
}
function wrtOut1(){
clearTimeout(stp1);
clearTimeout(stp2);
clearTimeout(stp3);
parent.main.document.close();
parent.main.document.write("<BODY"
+" BGCOLOR='black' ALINK='w"
+"hite' VLINK='yellow'> <CENTER><P><FON"
+"T SIZE=5 COLOR='whi"
+"te'><B>Good Guessing! ");
ls="You beat the bytes off me. You "
+"won, "+scop+" to "+scoc
+"! <P>Bummer!<P>Maybe You Do Rule" +" this Poor Machine... :-"
+"(<BR><IMG SRC='"+locnm1
+"nr/c3.gif' HEIGHT=100 WIDTH=100>";
if (scoc>scop){
ls="Just not good enough. I won, "+scoc
+" to "+scop+"! <P"
+">Way Cool!<P>Computers Rule! :-)"
+"<BR><IMG SRC='"+locnm1
+"nr/c3.gif' HEIGHT=100 WIDTH=100>";
}
if (scoc==scop){
ls="Just barely well enough,though. "
+"We tied, "+scoc+" to "+scop
+"! <P>Hmmm!<P>Did you cheat?"
+" ;-|<BR><IMG SRC='"
+locnm1
+"nr/c3.gif' HEIGHT=100 WIDTH=100>";
}
wrtOut2();
}
function wrtOut2(){
parent.main.document.write(ls
+"<P><FORM><INPUT TYPE='button' NAME"
+"='but' VALUE=' I want to play again! '"
+" onClick='parent.location.href=\"s30.ht"
+"m\";'><P><INPUT TYPE='button' NAME"
+"='but1' VALUE=' Let Me See the Scripts '"
+" onClick='parent.location.href=\"s52.ht"
+"m\";'></FORM></FONT></BODY></HT"
+"ML><P>");
}
function doCalcp(){
dif=xtst-rec;
if (dif<0){
dif=dif*-1;
}
if (dif==0){
scoc+=10;
}
else{
scop+=dif;
}
}
function doCalcc(){
dif=xtst-rec;
if (dif<0){
dif=dif*-1;
}
if (dif==0){
scop+=10;
}
else{
scoc+=dif;
}
}
function srand(){
today=new Date();
rand=today.getTime();
picker="a"+rand;
picker=picker.charAt((picker.length-4));
rec=picker;
}
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ug">
<INPUT TYPE="text" NAME="key" VALUE="" SIZE=1>
<INPUT TYPE="text" NAME="disp" VALUE="" SIZE=1>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers
getKey();
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>
Click Here to See This Script.
| 
