Solved

On Screen Keyboard: Need extra functionalities

Posted on 2008-11-01
2
262 Views
Last Modified: 2012-05-05
Hey Guys,

I made my On screen keyboard finally. The JS file and the HTML files are given below. the attached files are the images for the keyboard.

Now i wan't to add three functionalities in the keyboard and i'm confused in how to do it :

1. I need to show the Number keys only and hide rest of the keyboard at certain places. So, how can i do it?

2. I need to give a PRESSED effect to the keys. As in if i a key is entered then it should show that it has been pressed .

3. Continuing on the Pressed effect : When the CAPSLOCK is turned on, the key should remain pressed until it is turned off.

Hope i'm clear guys.

KEYBOARD.JS

 

var specialChar = new Array(new Array("CAPS",""),new Array("ET",""),new Array("#",""));

var standardKeys = new Array(

new Array("1","2","3","4","5","6","7","8","9","0","<img src='bkp.jpg' height='15' width='30'>"),

new Array("Q","W","E","R","T","Y","U","I","O","P"),

new Array("CAPS","A","S","D","F","G","H","J","K","L","Enter"),

new Array("Z","X","C","V","B","N","M"," "));

var currentKey = 0;

var currentRow = 0;

var capsStatus = "OFF";

var inputField;

var keyboardStatus = false;

function generateKeyButton(keyText){

	if(keyText == " "){

	return "<table  cellspacing =\"0\" cellpadding=\"0\" id=\"keyTable_"+keyText+"\"> <tr> <td><img src=\"a/th1_tl.gif\"> </td> <td background=\"a/th1_top.gif\"> </td> <td> <img src=\"a/th1_tr.gif\"> </td> </tr> <tr> <td background=\"a/th1_ls.gif\"> </td><td>	<table width=\"165\" height=\"15\" cellspacing =\"0\" cellpadding=\"0\">	<tr>	<td id=\"key_"+keyText+"\" ><center>"+keyText+"</center>	</td>	</tr>	</table> </td><td background=\"a/th1_rs.gif\"> </td> </tr> <tr> <td>  <img src=\"a/th1_bl.gif\">  </td> <td background=\"a/th1_btm.gif\"> </td><td>  <img src=\"a/th1_br.gif\"> </td> </tr> </table>";

	}else{

	return "<table  cellspacing =\"0\" cellpadding=\"0\" id=\"keyTable_"+keyText+"\"> <tr> <td><img src=\"a/th1_tl.gif\"> </td> <td background=\"a/th1_top.gif\"> </td> <td> <img src=\"a/th1_tr.gif\"> </td> </tr> <tr> <td background=\"a/th1_ls.gif\"> </td><td>	<table width=\"15\" height=\"15\" cellspacing =\"0\" cellpadding=\"0\">	<tr>	<td id=\"key_"+keyText+"\" ><center>"+keyText+"</center>	</td>	</tr>	</table> </td><td background=\"a/th1_rs.gif\"> </td> </tr> <tr> <td>  <img src=\"a/th1_bl.gif\">  </td> <td background=\"a/th1_btm.gif\"> </td><td>  <img src=\"a/th1_br.gif\"> </td> </tr> </table>";

	}

}

 

function generateFullKeyboard(){

	var keyBoardStr = "<table  cellpadding=\"0\" cellspacing=\"1\" border=\"0\"><tr><td ><table cellpadding=\"0\" cellspacing=\"0\" >";

	for(var keyIndex=0;keyIndex<standardKeys.length;keyIndex++){

		keyBoardStr = keyBoardStr + "<tr><td><table   cellpadding=\"0\" cellspacing=\"1\" ><tr>";

		for(index2=0;index2<standardKeys[keyIndex].length;index2++){

			if((index2==0 && keyIndex==0) || (index2==0 && keyIndex==1))

			keyBoardStr = keyBoardStr +	"<td><table  cellspacing =\"0\" cellpadding=\"0\" > <tr> <td><img src=\"a/th1_tl.gif\"> </td> <td background=\"a/th1_top.gif\"> </td> <td> <img src=\"a/th1_tr.gif\"> </td> </tr> <tr> <td background=\"a/th1_ls.gif\"> </td><td>	<table width=\"15\" height=\"15\" cellspacing =\"0\" cellpadding=\"0\">	<tr>	<td ><center>&nbsp;</center>	</td>	</tr>	</table> </td><td background=\"a/th1_rs.gif\"> </td> </tr> <tr> <td>  <img src=\"a/th1_bl.gif\">  </td> <td background=\"a/th1_btm.gif\"> </td><td>  <img src=\"a/th1_br.gif\"> </td> </tr> </table></td><td>" +generateKeyButton(standardKeys[keyIndex][index2]) + "</td>";

			else if((index2==9 && keyIndex==1))

			keyBoardStr = keyBoardStr +	"<td>" +generateKeyButton(standardKeys[keyIndex][index2]) + "</td><td><table  cellspacing =\"0\" cellpadding=\"0\" > <tr> <td><img src=\"a/th1_tl.gif\"> </td> <td background=\"a/th1_top.gif\"> </td> <td> <img src=\"a/th1_tr.gif\"> </td> </tr> <tr> <td background=\"a/th1_ls.gif\"> </td><td>	<table width=\"15\" height=\"15\" cellspacing =\"0\" cellpadding=\"0\">	<tr>	<td ><center>&nbsp;</center>	</td>	</tr>	</table> </td><td background=\"a/th1_rs.gif\"> </td> </tr> <tr> <td>  <img src=\"a/th1_bl.gif\">  </td> <td background=\"a/th1_btm.gif\"> </td><td>  <img src=\"a/th1_br.gif\"> </td> </tr> </table></td>";

			else

			keyBoardStr = keyBoardStr + "<td>" +generateKeyButton(standardKeys[keyIndex][index2]) + "</td>";

		}

		keyBoardStr = keyBoardStr + "</tr></table></td></tr>";

	}

	keyBoardStr = keyBoardStr + "</table></td></tr></table>";

	document.getElementById("keyboard").innerHTML = keyBoardStr;

	document.getElementById("keyTable_1").style.backgroundColor="#cccccc";

 

}

 

 

document.onkeydown = checkKeycode

 

function dontChangeFocus()

{

	inputField.focus();

}

 

function checkKeycode(e) {

	var keycode;

	if (window.event) keycode = window.event.keyCode;

	else if (e) keycode = e.which;

	if(keycode==38||keycode==1280)//up Arrow

	{

		goUp();

	}

	else if(keycode==40||keycode==1281)//down arrow

	{

		 goDown();

	}

	else if(keycode==39||keycode==1283)

	{

		goRight();

	}

	else if(keycode==37||keycode==1282)

	{

		goLeft();

	}

	else if(keycode==13)

	{

		if(keyboardStatus == false && inputField!=null){

			showKeyboard(inputField);

		}

		else{

			pressSelect();

		}

	}

	else if(keycode==8 || keycode==1288)

	{

		goBack();

	}

}

 

function goLeft(){

	var tempKey = "key_"+standardKeys[currentRow][currentKey];

	var tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#ffffff";

 

	currentKey--;

	if(currentKey==-1){

		currentKey=standardKeys[currentRow].length-1;

	}

	tempKey = "key_"+standardKeys[currentRow][currentKey];

	tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#cccccc";

 

}

 

function goRight(){

	var tempKey = "key_"+standardKeys[currentRow][currentKey];

	var tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#ffffff";

 

	currentKey++;

	if(currentKey>=standardKeys[currentRow].length){

		currentKey=0;

	}

	tempKey = "key_"+standardKeys[currentRow][currentKey];

	tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#cccccc";

 

}

 

 

function goUp(){

	var tempKey = "key_"+standardKeys[currentRow][currentKey];

	var tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#ffffff";

 

	currentRow--;

	if(currentRow==-1){

		currentRow=standardKeys.length-1;

	}

	while(currentKey >= standardKeys[currentRow].length){

		currentKey--

	}

	tempKey = "key_"+standardKeys[currentRow][currentKey];

	tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#cccccc";

	

}

 

function goDown(){

	var tempKey = "key_"+standardKeys[currentRow][currentKey];

	var tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#ffffff";

	currentRow++;

	if(currentRow>=standardKeys.length){

		currentRow=0;

	}

 

	while(currentKey >= standardKeys[currentRow].length){

		currentKey--

	}

 

	tempKey = "key_"+standardKeys[currentRow][currentKey];

	tempTableKey = "keyTable_"+standardKeys[currentRow][currentKey];

	document.getElementById(tempKey).bgColor="#cccccc";

	

 

 

}

 

 

function pressSelect(){

	var keyStr = (""+standardKeys[currentRow][currentKey]);

	if(capsStatus=="OFF"){

		keyStr = keyStr.toLowerCase();

	}else{

		keyStr = keyStr.toUpperCase();

	}

	if(checkForSpecialChars(standardKeys[currentRow][currentKey]))

		inputField.value = inputField.value + keyStr;

}

 

function checkForSpecialChars(keyText){

	for(var specialIndex=0;specialIndex<specialChar.length;specialIndex++){

		for(var index2=0;index2<specialChar[specialIndex].length;index2++){

			if(keyText==specialChar[specialIndex][index2]){

				if(keyText=="CAPS" && capsStatus == "ON"){

					capsStatus = "OFF";

				}else if(keyText=="CAPS" && capsStatus == "OFF")

				{

					capsStatus = "ON";

				}

				return false;

			}

		}

	}

	return true;

}

 

function goBack(){

	if(inputField.value.length>0){

		inputField.value = inputField.value.substring(0,inputField.value.length-1);

	}

}

 

KEYBOARD.HTML :

 

<html>

<script language="JavaScript" type="text/javascript" src="keyboard.js"></script>

<body bgcolor="#ffffff" id="bodyid">

<div style="position:absolute;left:100;top:30;" ><input type="text" onfocus="javascript:textBoxInFocus(this);"  name="textField" onblur="javascript:textBoxOutFocus();" id="textField" style="width:260px;" >

</div>

<div style="position:absolute;left:600;top:30;"><input type="text" onfocus="javascript:textBoxInFocus(this);"  name="textField2" onblur="javascript:textBoxOutFocus();" id="textField2" style="width:260px;" >

</div>

 

<div id="keyboard"  style="display:none;border:1px solid #000000 ;position:absolute;left:150;top:300;width:410"></div>

 

 

<script language="javascript">

generateFullKeyboard();

 

function hideKeyboard(){

keyboardStatus = false;

inputField.onblur="javascript:textBoxOutFocus();";

document.getElementById("keyboard").style.display="none";

//inputField = null;

}

function showKeyboard(obj){

keyboardStatus = true;

document.getElementById("keyboard").style.display="block";

inputField = obj;

inputField.onblur="javascript:textBoxOutFocus();dontChangeFocus();";

 

}

 

function textBoxOutFocus()

{

	//inputField = null;

}

 

function textBoxInFocus(obj){

	inputField = obj;

}

 

function findPosX(obj)

  {

    var curleft = 0;

    if(obj.offsetParent)

        while(1) 

        {

          curleft += obj.offsetLeft;

          if(!obj.offsetParent)

            break;

          obj = obj.offsetParent;

        }

    else if(obj.x)

        curleft += obj.x;

    return curleft;

  }

 

  function findPosY(obj)

  {

    var curtop = 0;

    if(obj.offsetParent)

        while(1)

        {

          curtop += obj.offsetTop;

          if(!obj.offsetParent)

            break;

          obj = obj.offsetParent;

        }

    else if(obj.y)

        curtop += obj.y;

    return curtop;

  }

 

	function test()

	{

		printstring("Hi\n");

	}

</script>

</body>

</html>

Open in new window

th1-bl.gif
th1-br.gif
th1-btm.gif
th1-ls.gif
th1-rs.gif
th1-tl.gif
th1-top.gif
th1-tr.gif
0
Comment
Question by:manas_sharma86
2 Comments
 
LVL 17

Accepted Solution

by:
cem_turk earned 500 total points
ID: 23067669
following will change the bgcolor of the cells when buttons are pressed


function pressSelect(){

	var keyStr = (""+standardKeys[currentRow][currentKey]);

	if(capsStatus=="OFF"){

		keyStr = keyStr.toLowerCase();

	}else{

		keyStr = keyStr.toUpperCase();

	}

	if(checkForSpecialChars(standardKeys[currentRow][currentKey])) {

		inputField.value = inputField.value + keyStr;

document.getElementById("key_" + keyStr).style.color="red"; //change key color to red

setTimeout("document.getElementById('key_' " + keyStr + "').style.color=''",500); //reset color after half a second
 

}

}

 

function checkForSpecialChars(keyText){

	for(var specialIndex=0;specialIndex<specialChar.length;specialIndex++){

		for(var index2=0;index2<specialChar[specialIndex].length;index2++){

			if(keyText==specialChar[specialIndex][index2]){

				if(keyText=="CAPS" && capsStatus == "ON"){

					capsStatus = "OFF";

document.getElementById("key_CAPS").style.color="";

				}else if(keyText=="CAPS" && capsStatus == "OFF")

				{

					capsStatus = "ON";

document.getElementById("key_CAPS").style.color="red";

				}

				return false;

			}

		}

	}

	return true;

}

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now