Solved

On Screen Keyboard: Need extra functionalities

Posted on 2008-11-01
2
268 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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

773 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