Solved

On screen keyboard with Display

Posted on 2008-10-18
11
1,266 Views
Last Modified: 2012-05-05
I need to create an on screen keyboard with display using HTML and Java Script only. This on screen keyboard will be displayed on an emulator. I'm a beginner and have no clue on  how to make it. So can you please provide me the code and directions on this subject.
0
Comment
Question by:manas_sharma86
  • 5
  • 5
11 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22750024
Lots of good examples here --
javascript.internet.com/miscellaneous/on-screen-keyboard.html
www.march-of-faces.org/resources/vkt.html
webscripts.softpedia.com/script/Forms-and-Controls-C-C/On-Screen-Keyboard--22247.html
http://www.google.com/search?num=30&q=HTML+on-screen+keyboard
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22750100
Simple Virtual Keyboard
http://www.greywyvern.com/code/js/keyboard.html

Source to use it below.
You will want to download the files and use it for your own sites.
  <script type="text/javascript" src="http://www.greywyvern.com/code/js/keyboard.js" charset="UTF-8"></script>

  <link rel="stylesheet" type="text/css" href="http://www.greywyvern.com/code/js/keyboard.css">

  <input type="text" value="" class="keyboardInput"/> <br/>

  <input type="password" class="keyboardInput"/> <br/>

  <textarea rows="3" cols="20" class="keyboardInput"></textarea>

Open in new window

0
 

Author Comment

by:manas_sharma86
ID: 22751157
Please guys i need a sloution as soon as possible... An on screen keyboard which shows the input text on display as well. The keyboard needs to have the arrow keys as well because i need to run it on an emulator which requires a remote to access it. Hope you guys have the clear picture now.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22751222
What do you mean by "emulator"?
Not quite sure what it is you need.
0
 

Author Comment

by:manas_sharma86
ID: 22751339
Just think of it as a TV.....emulator is similar to a TV...where it is accessed by a remote and i need the on screen keyboard for that purpose....i hope i'm clear now?
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 16

Expert Comment

by:sh0e
ID: 22751411
Unfortunately there is need for more information.
You are saying you want to emulate the left and right arrow keys in a browser.
But left and right arrow keys are special within the browser.  As is sending keys in general.
There is no "send keypress x", all simulation will have to involve inserting text.

And then you mention showing input text on display, where display could be any number of things.
Then you mention remote access, which could be anything.
And an emulator, from what I understand in technical terms, is any device that simulates the functions of another device.

What exactly do you want these sent keys to do?  The left and right arrow buttons don't send text, they have special functions depending on what object is in focus.
0
 

Author Comment

by:manas_sharma86
ID: 22752378
All right.. Lets start from the scratch and lets leave out the emulator from the discussion. I want an on screen keyboard in HTML and Java script which can work on any browser and if i press 'A' for example on that keyboard then 'A' should be displayed over the on screen keyboard. But i need one thing extra in that keyboard and that is if i press the arrow keys on the on screen keyboard then it should react according to the direction of the arrow.

Hope i'm clear now. Sorry but all this is new for me as well. Struts was my thing till now.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22753494
Something like this?
<script>

function nkey(k){

	if(k=='uc')

		document.getElementById('disp').innerHTML = 'shift';

	else if(k=='bs')

		document.getElementById('disp').innerHTML = 'backspace';

	else if(k=='caps')

		document.getElementById('disp').innerHTML = 'caps lock';

	else if(k=='larr')

		document.getElementById('disp').innerHTML = 'left arrow';

	else if(k=='rarr')

		document.getElementById('disp').innerHTML = 'right arrow';

	else if(k=='uarr')

		document.getElementById('disp').innerHTML = 'up arrow';

	else if(k=='darr')

		document.getElementById('disp').innerHTML = 'down arrow';

	else if(k=='enter')

		document.getElementById('disp').innerHTML = 'enter';

	else

		document.getElementById('disp').innerHTML = k;

}
 

</script>
 
 

<table border="0" cellspacing="0" cellpadding="1">

			<tr>

				<td colspan=12>

					<center>

						<span id="disp"></span>

					</center>
 

				</td>

			</tr>

			<tr>

				<td colspan=12>

					&nbsp;

				</td>

			</tr>

			

			<tr>

				<td>
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;" onClick="nkey(1)">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;" onClick="nkey(2)">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;" onClick="nkey(3)">

				</td>

				<td >
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;" onClick="nkey(4)">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;" onClick="nkey(5)">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;" onClick="nkey(6)">

				</td>

				<td >
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;" onClick="nkey(7)">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;" onClick="nkey(8)">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;" onClick="nkey(9)">

				</td>

				<td >
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;&nbsp;" onClick="nkey(0)">

				</td>

				<td colspan=2>

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;backspace&nbsp;&nbsp;&nbsp;" onClick="nkey('bs')">

				</td>

			</tr>

			<tr>

				<td>

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Q&nbsp;&nbsp;&nbsp;" onClick="nkey('q')">
 

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;W&nbsp;&nbsp;&nbsp;" onClick="nkey('w')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;" onClick="nkey('e')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;" onClick="nkey('r')">
 

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;&nbsp;" onClick="nkey('t')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Z&nbsp;&nbsp;&nbsp;" onClick="nkey('z')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;U&nbsp;&nbsp;&nbsp;" onClick="nkey('u')">
 

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;" onClick="nkey('i')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;O&nbsp;&nbsp;&nbsp;" onClick="nkey('o')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;&nbsp;" onClick="nkey('p')">
 

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Ü&nbsp;&nbsp;&nbsp;" onClick="nkey('ü')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;" onClick="nkey('+')">

				</td>

			</tr>

			<tr>
 

				<td >

					<input class="cabutt" type=button value="Caps" onClick="nkey('caps')">

					

				</td>

				<td>

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;" onClick="nkey('a')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;" onClick="nkey('s')">

				</td>
 

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;&nbsp;" onClick="nkey('d')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;F&nbsp;&nbsp;&nbsp;" onClick="nkey('f')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;" onClick="nkey('g')">

				</td>
 

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;H&nbsp;&nbsp;&nbsp;" onClick="nkey('h')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;J&nbsp;&nbsp;&nbsp;" onClick="nkey('j')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;K&nbsp;&nbsp;&nbsp;" onClick="nkey('k')">

				</td>
 

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;L&nbsp;&nbsp;&nbsp;" onClick="nkey('l')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Ö&nbsp;&nbsp;&nbsp;" onClick="nkey('ö')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Ä&nbsp;&nbsp;&nbsp;" onClick="nkey('ä')">

				</td>
 

			</tr>

			<tr>

				<td colspan=2>

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;shift&nbsp;&nbsp;&nbsp;" onClick="nkey('uc')">

				</td>

				<td>

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;Y&nbsp;&nbsp;&nbsp;" onClick="nkey('y')">

				</td>

				<td >
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;" onClick="nkey('x')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;" onClick="nkey('c')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;V&nbsp;&nbsp;&nbsp;" onClick="nkey('v')">

				</td>

				<td >
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;" onClick="nkey('b')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;&nbsp;" onClick="nkey('n')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;" onClick="nkey('m')">

				</td>

				<td >
 

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;,&nbsp;&nbsp;&nbsp;" onClick="nkey(',')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;" onClick="nkey('.')">

				</td>

				<td >

					<input class="cabutt" type=button value="&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;" onClick="nkey('-')">

				</td>

			</tr>
 

			<tr>

				<td>

					<center>

						<input type="text" name="capsdisp" size="3" maxlength="4" value="">

					</center>

				</td>

				<td>

					<center>

						<input type="text" name="lockdisp" size="3" maxlength="4" value="&nbsp;">
 

					</center>

				</td>

				<td colspan=8>

					<input class="cabutt" type=button value="space" onClick="nkey(' ')">

				</td>

				<td colspan=2>

					<input class="cabutt" type=button value="Enter" onClick="nkey('enter')">

				</td>

			</tr>

		</table>

		

		<table>

		<tr>

		<td>

		<input class="cabutt" type=button value="&larr;" onClick="nkey('left')"/>

		</td>

			<td>

			<input class="cabutt" type=button value="&uarr;" onClick="nkey('up')"/><br/>

			<input class="cabutt" type=button value="&darr;" onClick="nkey('down')"/>

			</td>

		<td>

		<input class="cabutt" type=button value="&rarr;" onClick="nkey('right')"/>

		</td>

		</tr>

		</table>

Open in new window

0
 

Author Comment

by:manas_sharma86
ID: 22755522
No....But I worked on it yesterday night and I'm done with it.
Thanks for the response.
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22764321
You should finalize the thread by deleting the thread, or PAQing it by accepting your own comment as an answer.
0
 

Author Comment

by:manas_sharma86
ID: 22819575
Guys....Need a favor...I need an on screen keyboard which is similar to say the iPhone but only in HTML and Java Script...Please help on this asap.

0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

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.
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 …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

707 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