Keyboard Emulator

This is a keyboard emulator that allows the user to 'type' using the mouse. Works in IE 5+ and Firefox/Mozilla

`1 2 3 4 5 6 7 8 9 0 -=Back

.com .net .org .edu .gov .mil .us .biz @

You can copy the page html from the textarea below and save it to your local system.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Keyboard Emulator</title>

var shiftStatus='up'
var shiftLockStatus='up'
var cursorPos=0

//This array holds the key object id, normal value, shift value, shift type for each key
var keyArray=new Array(47)
keyArray[0]=new Array("tilda","`","~","no")
keyArray[1]=new Array("one","1","!","no")
keyArray[2]=new Array("two","2","@","no")
keyArray[3]=new Array("three","3","#","no")
keyArray[4]=new Array("four","4","$","no")
keyArray[5]=new Array("five","5","%","no")
keyArray[6]=new Array("six","6","^","no")
keyArray[7]=new Array("seven","7","&","no")
keyArray[8]=new Array("eight","8","*","no")
keyArray[9]=new Array("nine","9","(","no")
keyArray[10]=new Array("zero","0",")","no")
keyArray[11]=new Array("dash","-","_","no")
keyArray[12]=new Array("eq","=","+","no")
keyArray[13]=new Array("Q","q","Q","yes")
keyArray[14]=new Array("W","w","W","yes")
keyArray[15]=new Array("E","e","E","yes")
keyArray[16]=new Array("R","r","R","yes")
keyArray[17]=new Array("T","t","T","yes")
keyArray[18]=new Array("Y","y","Y","yes")
keyArray[19]=new Array("U","u","U","yes")
keyArray[20]=new Array("I","i","I","yes")
keyArray[21]=new Array("O","o","O","yes")
keyArray[22]=new Array("P","p","P","yes")
keyArray[23]=new Array("osqr","[","{","yes")
keyArray[24]=new Array("csqr","]","}","yes")
keyArray[25]=new Array("backslash","\\","|","no")
keyArray[26]=new Array("A","a","A","yes")
keyArray[27]=new Array("S","s","S","yes")
keyArray[28]=new Array("D","d","D","yes")
keyArray[29]=new Array("F","f","F","yes")
keyArray[30]=new Array("G","g","G","yes")
keyArray[31]=new Array("H","h","H","yes")
keyArray[32]=new Array("J","j","J","yes")
keyArray[33]=new Array("K","k","K","yes")
keyArray[34]=new Array("L","l","L","yes")
keyArray[35]=new Array("colon",";",":","no")
keyArray[36]=new Array("quote","'",'"',"no")
keyArray[37]=new Array("Z","z","Z","yes")
keyArray[38]=new Array("X","x","X","yes")
keyArray[39]=new Array("C","c","C","yes")
keyArray[40]=new Array("V","v","V","yes")
keyArray[41]=new Array("B","b","B","yes")
keyArray[42]=new Array("N","n","N","yes")
keyArray[43]=new Array("M","m","M","yes")
keyArray[44]=new Array("comma",",","<","no")
keyArray[45]=new Array("period",".",">","no")
keyArray[46]=new Array("slash","/","?","no")

//this function adds the clicked key value to the textbox
//by firing the insertAtCursor function.
//It also turns off the shiftkey
function addKey(obj){
var curKey=obj.innerHTML
oText=document.getElementById('myText')
insertAtCursor(oText,curKey)
if (shiftStatus=='down'){
	setShift()
	}
}

//this function sets/resets the current cursor position in the textbox
function setPosition(obj){
myField=obj
if (document.selection) {
	var sel = document.selection.createRange();
	var alltext=myField.createTextRange()
	sel.collapse();
	var sel_before = sel.duplicate();
	sel_before.setEndPoint("EndToStart",sel);
	sel_before.setEndPoint("StartToStart",alltext)
	text_before = sel_before.text;
	cursorPos=text_before.length
	}
//Mozilla/Firefox/Netscape 7+ support
else if (myField.selectionStart || myField.selectionStart == '0') {
	cursorPos = myField.selectionEnd
} else {
	cursorPos=cursorPos
	}
}

//this function inserts the key value at the current cursor position
function insertAtCursor(myField, myValue) {
if (cursorPos==myField.value.length){
	myField.value=myField.value+myValue
}else{
	//IE support
	if (document.selection) {
		text_before=myField.value.substring(0,cursorPos)
		text_after=myField.value.substring(cursorPos,myField.value.length)
		 myField.value = text_before  +  myValue + text_after;
		 var sel=myField.createTextRange()
		 sel.moveStart('character',cursorPos+myValue.length)
		 sel.setEndPoint("EndToStart",sel);
		 sel.select()
		}
	//Mozilla/Firefox/Netscape 7+ support
	else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos=cursorPos
		var endPos=cursorPos
		myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length);
		myField.selectionStart=cursorPos+myValue.length
		myField.selectionEnd=cursorPos+myValue.length
		myField.focus()	
		
		
	} else {
		myField.value += myValue;
		}
	}
cursorPos=cursorPos+myValue.length		
}

//this function deletes a character to the left of the current cursor position
function deleteAtCursor(myField) {
if (cursorPos==myField.value.length || myField.value.length==0){
	myField.value=myField.value.substring(0,myField.value.length-1)
	myField.focus()
}else{
	//IE support
	if (document.selection) {
		text_before=myField.value.substring(0,cursorPos-1)
		text_after=myField.value.substring(cursorPos,myField.value.length)
		 myField.value = text_before  +  myValue + text_after;
		 var sel=myField.createTextRange()
		 sel.moveStart('character',cursorPos-1)
		 sel.setEndPoint("EndToStart",sel);
		 sel.select()
		}
	//Mozilla/Firefox/Netscape 7+ support
	else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos=cursorPos
		var endPos=cursorPos
		myField.value = myField.value.substring(0, startPos-1)+ myField.value.substring(endPos, myField.value.length);
		myField.selectionStart=cursorPos-1
		myField.selectionEnd=cursorPos-1
		myField.focus()	
	} else {
		myField.value += myValue;
		}
	}	
cursorPos=cursorPos-1	
}

//this function sets the shift status when the shift and/or shift key is pressed
function setShift(){
if(shiftLockStatus=='up'){
	if (shiftStatus=='down'){
		shiftStatus='up'
		document.getElementById('shift1').style.backgroundColor="#f0f0f0"
		document.getElementById('shift2').style.backgroundColor="#f0f0f0"
		for (i=0;i<47;++i){
			document.getElementById(keyArray[i][0]).innerHTML=keyArray[i][1]
			}
	}else{
		shiftStatus='down'
		document.getElementById('shift1').style.backgroundColor="#fafafa"
		document.getElementById('shift2').style.backgroundColor="#fafafa"
		for (i=0;i<47;++i){
			document.getElementById(keyArray[i][0]).innerHTML=keyArray[i][2]
			}	
		}
}else{
	if (shiftStatus=='up'){
		shiftStatus='down'
		document.getElementById('shift1').style.backgroundColor="#fafafa"
		document.getElementById('shift2').style.backgroundColor="#fafafa"
		for (i=0;i<47;++i){
			document.getElementById(keyArray[i][0]).innerHTML=(keyArray[i][3]=='yes'?keyArray[i][1]:keyArray[i][2])
			}
	}else{
		shiftStatus='up'
		document.getElementById('shift1').style.backgroundColor="#f0f0f0"
		document.getElementById('shift2').style.backgroundColor="#f0f0f0"
		for (i=0;i<47;++i){
			document.getElementById(keyArray[i][0]).innerHTML=(keyArray[i][3]=='yes'?keyArray[i][2]:keyArray[i][1])
			}	
		}
	}
}

//this function sets the shift lock status
function capsLock(){
if (shiftStatus=='down'){
	setShift()
	}
if(shiftLockStatus=='up'){
	shiftLockStatus='down'
	document.getElementById('capslock').style.backgroundColor="#fafafa"	
	for (i=0;i<47;++i){
		document.getElementById(keyArray[i][0]).innerHTML=(keyArray[i][3]=='yes'?keyArray[i][2]:keyArray[i][1])
			}
}else{
	shiftLockStatus='up'
	document.getElementById('capslock').style.backgroundColor="#f0f0f0"	
	for (i=0;i<47;++i){
		document.getElementById(keyArray[i][0]).innerHTML=keyArray[i][1]
			}
	}			
}

//-->
</script>

.keybox	{
	position:relative;
	float:left;
	display:block;
	height: 28px;
	width:28px;
	border: 1px solid #000;
	background-color: #f0f0f0;
	font-size: 0.81em;
	text-align:center;
	line-height: 28px;
	border-collapse: collapse;
	text-decoration:none;
	color: #000;
}

.keybox:hover	{
	background-color: #fafafa;
}

.spacer	{
	position:relative;
	float:left;
	display:block;
	width: 15px;
}
</style>

</head>

<body>
<div id="main">
<h1>Keyboard Emulator</h1>
<p>This is a keyboard emulator that allows the user to 'type' using the mouse.</p>
<a id="tilda" class="keybox" onclick="addKey(this)">`</a><a id="one" class="keybox" onclick="addKey(this)">1</a><a id="two" class="keybox" onclick="addKey(this)">2</a><a id="three" class="keybox" onclick="addKey(this)">3</a><a id="four" class="keybox" onclick="addKey(this)">4</a><a id="five" class="keybox" onclick="addKey(this)">5</a><a id="six" class="keybox" onclick="addKey(this)">6</a><a id="seven" class="keybox" onclick="addKey(this)">7</a><a id="eight" class="keybox" onclick="addKey(this)">8</a><a id="nine" class="keybox" onclick="addKey(this)">9</a><a id="zero" class="keybox" onclick="addKey(this)">0</a><a id="dash" class="keybox" onclick="addKey(this)">-</a><a id="eq" class="keybox" onclick="addKey(this)">=</a><a style="width: 58px;font-size: 0.71em;" class="keybox" onclick="deleteAtCursor(document.getElementById('myText'))">Back</a><div style="clear:both;"></div>
<a style="width: 48px;font-size: 0.71em;" class="keybox" onclick="addTab()">Tab</a><a id="Q" class="keybox" onclick="addKey(this)">q</a><a id="W" class="keybox" onclick="addKey(this)">w</a><a id="E" class="keybox" onclick="addKey(this)">e</a><a id="R" class="keybox" onclick="addKey(this)">r</a><a id="T" class="keybox" onclick="addKey(this)">t</a><a id="Y" class="keybox" onclick="addKey(this)">y</a><a id="U" class="keybox" onclick="addKey(this)">u</a><a id="I" class="keybox" onclick="addKey(this)">i</a><a id="O" class="keybox" onclick="addKey(this)">o</a><a id="P" class="keybox" onclick="addKey(this)">p</a><a id="osqr" class="keybox" onclick="addKey(this)">[</a><a id="csqr" class="keybox" onclick="addKey(this)">]</a><a id="backslash" style="width:38px;" class="keybox" onclick="addKey(this)">\</a><div style="clear:both;"></div>
<a id="capslock" style="width: 58px;font-size: 0.71em;" class="keybox" onclick="capsLock()">Caps Lock</a><a id="A" class="keybox" onclick="addKey(this)">a</a><a id="S" class="keybox" onclick="addKey(this)">s</a><a id="D" class="keybox" onclick="addKey(this)">d</a><a id="F" class="keybox" onclick="addKey(this)">f</a><a id="G" class="keybox" onclick="addKey(this)">g</a><a id="H" class="keybox" onclick="addKey(this)">h</a><a id="J" class="keybox" onclick="addKey(this)">j</a><a id="K" class="keybox" onclick="addKey(this)">k</a><a id="L" class="keybox" onclick="addKey(this)">l</a><a id="colon" class="keybox" onclick="addKey(this)">;</a><a id="quote" class="keybox" onclick="addKey(this)">'</a><a style="width:58px;font-size:0.71em;" class="keybox" onclick="">Enter</a><div style="clear:both;"></div>
<a id="shift1" class="keybox" style="width: 68px;font-size: 0.71em;" onclick="setShift()">Shift</a><a id="Z" class="keybox" onclick="addKey(this)">z</a><a id="X" class="keybox" onclick="addKey(this)">x</a><a id="C" class="keybox" onclick="addKey(this)">c</a><a id="V" class="keybox" onclick="addKey(this)">v</a><a id="B" class="keybox" onclick="addKey(this)">b</a><a id="N" class="keybox" onclick="addKey(this)">n</a><a id="M" class="keybox" onclick="addKey(this)">m</a><a id="comma" class="keybox" onclick="addKey(this)">,</a><a id="period" class="keybox" onclick="addKey(this)">.</a><a id="slash" class="keybox" onclick="addKey(this)">/</a><a id="shift2" class="keybox" style="width: 78px;font-size: 0.71em;" onclick="setShift()">Shift</a><div style="clear:both;"></div>
<a style="font-size: 0.71em;" id=".com" class="keybox" onclick="addKey(this)">.com</a><a style="font-size: 0.71em;" id=".net" class="keybox" onclick="addKey(this)">.net</a><a style="font-size: 0.71em;" id=".org" class="keybox" onclick="addKey(this)">.org</a><a style="font-size: 0.71em;" id=".edu" class="keybox" onclick="addKey(this)">.edu</a><a class="keybox" style="width: 178px;" onclick="addKey(this)"> </a><a style="font-size: 0.71em;" id=".gov" class="keybox" onclick="addKey(this)">.gov</a><a style="font-size: 0.71em;" id=".mil" class="keybox" onclick="addKey(this)">.mil</a><a style="font-size: 0.71em;" id=".us" class="keybox" onclick="addKey(this)">.us</a><a style="font-size: 0.71em;" id=".biz" class="keybox" onclick="addKey(this)">.biz</a><a style="font-size: 0.71em;" id="at" class="keybox" onclick="addKey(this)">@</a><div style="clear:both;"></div>
<br />
<input  type="text" size="60"  id="myText" onclick="setPosition(this)"  onkeypress="cursorPos=cursorPos+1"  />
<br /><br />

<p>You can copy the page html from the textarea below and save it to your local system.</p>
</div>
</body>

</html>