Developing a virtual keyboard using clientX and clientX in JavaScript

As we can read the position of the mouse click by using clientX and clientY, we will try to develop one script in which we will position four keys of our keyboard A S D F. These four keys are left side middle row of our keyboard.

We will get the available screen width of client screen by using screen.availWidth.
Demo of Virtual Keyboard

Button Layout

We will position each button like this

Button A 600px from right border

Button S 650px from right border

Button D 500px from right border

Button F 450px from right border

Each button will have width of 40px and there will be a gap of 10px between them. All are positioned 10px from top.
If the user clicks button A then the reading of client will be between

wd-600 and wd-600-40

Here Wd is the width of the client screen.

Button layout of virtual keyboard

Same way we can find out the area of other three buttons
Here is the source code of this demo

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>
<head>
<title>Demo of vertual keyboard using button and tracking clientX</title>

<script langauge="javascript">
function return_coor(event){
var wd=screen.availWidth; // width of the screen
var X = event.clientX;
var a2=wd-600; // right edge of the A button
var a1=wd-600 - 40; // left edge of the A button

var s2=wd-550; // right edge of the S button
var s1=wd-550-40; // left edge of S button

var d2=wd-500; // right edge of the D button
var d1=wd-500-40; // left edge of D button

var f2=wd-450; // right edge of the F button
var f1=wd-450-40; // left edge of F button

var str="";

if(X <a2 && X> a1){str ="A";}
if(X <s2 && X> s1){str ="S";}
if(X <d2 && X> d1){str ="D";}
if(X <f2 && X> f1){str ="F";}

document.getElementById("d1").innerHTML="X:"+event.clientX + "<br>Y:" + event.clientY ;
document.getElementById("d2").innerHTML=document.getElementById("d2").innerHTML + str;

}
</script>

</head>
<body >
<div id=d1></div>. 
<div id=d2></div>. 
<div id='my_page1' onClick=return_coor(event); 
style="position:absolute;right: 600px;top:10px;background-color: #006040; 
width: 40px; height : 40px; color: white;"> A </div> 

<div id='my_page2' onClick=return_coor(event); 
style="position:absolute;right: 550px;top:10px;background-color: #006040;
 width: 40px; height : 40px; color: white;"> S </div> 

<div id='my_page3' onClick=return_coor(event); 
style="position:absolute;right: 500px;top:10px;background-color: #006040; 
width: 40px; height : 40px; color: white;"> D </div> 

<div id='my_page4' onClick=return_coor(event); 
style="position:absolute;right: 450px;top:10px;background-color: #006040;
 width: 40px; height : 40px; color: white;"> F </div> 
</body>
</html>

Event Handling onMouseOver and onMouseOut

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

Virtual Keyboard, ASDF keys

Button Layout

Subhendu Mohapatra