Onscreen keyboard

searls03 · March 7, 2012, 4:50am

Has anyone seen a code out there for an on screen keyboard for my website. Specifically a numerical keypad that can insert the value directly into a textfiled. I am working on a pod system and this would be perfect for the touch screen terminal. Any help?

ErnieAlex · March 7, 2012, 1:10pm

Just make a small table with each being a small button and a Javascript to enter the data into the field that has focus. Shouldn’t be very hard to do… Good luck…

searls03 · March 7, 2012, 1:34pm

Could you point me to website or a sample script? I can think how I would do this if it were one number, but I am not sure how to do it if two numbers are entered

ErnieAlex · March 7, 2012, 1:46pm

Okay, here is a Javascript one that is a pop-up type keyboard. Kinda cute, you might like it.
It basically pops up and you type then close it. Not sure if that is what you are looking for.
If not, I found this on google using “PHP on screen keyboard” and there were a lot of others.

(Expert’s note: when googling for PHP, start the search with “PHP”… Always works better!)

Good luck…

searls03 · March 7, 2012, 7:38pm

did you forget the example?

searls03 · March 7, 2012, 7:43pm

what page in search results did you find it on? I googled that and all it shows is software downloads for keypads, nothing for php or javascript.

ErnieAlex · March 7, 2012, 9:15pm

SORRY, SORRY… My mouse messed up and I had to leave to help my sick mother… CRAZY hour or two…

Anyways, here is that link… SORRY again…

http://www.greywyvern.com/code/javascript/keyboard

searls03 · March 7, 2012, 10:47pm

what would be the code to do this using jquery.

PHP_Person · March 7, 2012, 10:55pm

Hm… I should think as a rough draft, it would be a get method (or post) that would send the key pressed and the keys before that were pressed.

P.S. I didn’t know your mother was sick, ErnieAlex; I wish her well.

searls03 · March 7, 2012, 10:56pm

but I want it to add as I type them. this is for an ONLINE POS and needs to be optimized for a touchscreen.

ErnieAlex · March 7, 2012, 11:01pm

Well that one is a basic, but, can be changed. So, it could be placed on a page or made full screen or whatever you need. You could use CSS to make it larger or whatever… It was just a starting spot.

Tomorrow I am helping sever people on this site catching up with notes. I can help more then.

Thanks on my mother, she is just getting over pneumonia and is finally doing better. More on the keyboard when I get back very late tonight or tomorrow…

searls03 · March 14, 2012, 2:15am

so I did find a code. I would like this to workd here:
[php]

    <input name="submit1" type="submit" value="Save Payment" />

      </tr>
  </table>

  </p></div> <div class='label1' id='Credit1' style="display:none"> Please enter value given

    <input name="submit2" type="submit" value="Save Payment"  />  
    
  <ul id="keyboard">		
	<table width="204" cellspacing="2" cellpadding="2">
	  <tr>
	    <th width="44" scope="col">&nbsp;</th>
	    <th width="44" scope="col">&nbsp;</th>
	    <th width="43" scope="col">&nbsp;</th>
	    <th width="37" scope="col">&nbsp;</th>
      </tr>
	  <tr>
	    <td>		<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>

      </tr>
  </table>

  </p></div> <div class='label1' id='Check1' style="display:none"> Please enter value given

    <input name="submit3" type="submit" value="Save Payment" />  
    
  <ul id="keyboard">		
	<table width="204" cellspacing="2" cellpadding="2">
	  <tr>
	    <th width="44" scope="col">&nbsp;</th>
	    <th width="44" scope="col">&nbsp;</th>
	    <th width="43" scope="col">&nbsp;</th>
	    <th width="37" scope="col">&nbsp;</th>
      </tr>
	  <tr>
	    <td>		<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>

      </tr>
  </table>

  </p></div> <div class='label1' id='Gift1' style="display:none"> Please enter value given

    <input name="submit4" type="submit" value="Save Payment" />  
<ul id="keyboard">		
	<table width="204" cellspacing="2" cellpadding="2">
	  <tr>
	    <th width="44" scope="col">&nbsp;</th>
	    <th width="44" scope="col">&nbsp;</th>
	    <th width="43" scope="col">&nbsp;</th>
	    <th width="37" scope="col">&nbsp;</th>
      </tr>
	  <tr>
	    <td>		<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>

      </tr>
  </table>

but what is happening is that it inserts into the correct field the first time, but after that it always inserts into the field for checks. here is the javascript portion of the code:

[code]$(function(){
var $write = $(’.payment1’),
shift = false,
capslock = false;

$('#keyboard li').click(function(){
	var $this = $(this),
		character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
	
	// Shift keys
	if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
		$('.letter').toggleClass('uppercase');
		$('.symbol span').toggle();
		
		shift = (shift === true) ? false : true;
		capslock = false;
		return false;
	}
	
	// Caps lock
	if ($this.hasClass('capslock')) {
		$('.letter').toggleClass('uppercase');
		capslock = true;
		return false;
	}
	
	// Delete
	if ($this.hasClass('delete')) {
		var html = $write.html();
		
		$write.html(html.substr(0, html.length - 1));
		return false;
	}
	
	// Special characters
	if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
	if ($this.hasClass('space')) character = ' ';
	if ($this.hasClass('tab')) character = "\t";
	if ($this.hasClass('return')) character = "\n";
	
	// Uppercase letter
	if ($this.hasClass('uppercase')) character = character.toUpperCase();
	
	// Remove shift once a key is clicked.
	if (shift === true) {
		$('.symbol span').toggle();
		if (capslock === false) $('.letter').toggleClass('uppercase');
		
		shift = false;
	}
	
	// Add the character
	$write.html($write.html() + character);
});

});
[/code]
the file for this code will contain the specific class/id for the textarea…this just happens to be the one I selected to copy and paste.


7&	8*	9(	20
4$	5%	6^	10
1!	2@	3#	1.50
0)	.)	delete
8*	9(	20
4$	5%	6^	10
1!	2@	3#	1.50
0)	.)	delete
8*	9(	20
4$	5%	6^	10
1!	2@	3#	1.50
0)	.)	delete
8*	9(	20
4$	5%	6^	10
1!	2@	3#	1.50
0)	.)	delete

ErnieAlex · March 20, 2012, 5:04pm

Did you get this figured out? I have been busy… I will look at it later if you still need help…

searls03 · March 20, 2012, 8:36pm

I do still need help with the last post I put.

ErnieAlex · March 20, 2012, 8:59pm

No, I will look at it.

Also, just FYI… 99% of touch screens come with a driver that works like a mouse. So, any finger pressing on the screen is just like a mouse click at that point. So, most POS system just make a nice “pretty” keyboard show up when needed. Since, this keyboard is part of the page or program, it is just programmable like anything else you can click on. So, really no optimization needed for touch screens.
( I did one once for a Pizza Place, it was easy once the numbers got in place. )

So, first, do you already have this in place? Can I see how it is set up? If you do not want it out in the public yet, just send me the like by PrivateMessage. If it is not in place yet, let me know too. I am looking at the code right now.

searls03 · March 20, 2012, 9:05pm

it is not posted online yet. it is on a local testing server.

ErnieAlex · March 20, 2012, 11:31pm

Searles03, I think you are over thinking it… I created a test HTML file for you. This only has 3 keys in it’s keyboard, a b c… And three fields. So, click on any field and it assumes the focus. Then, when you click keys they are entered into the field you selected. You can come up with some complicated way to select the fields, but, this works and very little code. Not much to it… I think it will work for you…

Okay, now to explain some further… First, you would have to include some code to error check and validate the type-in’s, but, you have to do this anyways. Also, if someone selects one input field, starts typing and then selects another without entering the first, the first should blank out. I did not put that code into my functions. That would be extremely simple to add, just check the last field for entries before allowing type in the next. Anyway, I am sure this will make your life much much easier… Just took a couple hours of thinking and laying out the code. Hope it helps…

This page works AS-IS, nothing else, so just drop it into a file and open it in your browser…

Have fun…

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Keyboard Test</title>
</head>
<script language="JavaScript" type="text/javascript">

var textfocus="test1";

function fieldfocus(newfield){
    textfocus=newfield;
	}

function keypressed(keychar){
	document.getElementById(textfocus).value = document.getElementById(textfocus).value + keychar;
	}
</script>
<body>
<table width="100%">
<tr><td><center>Texting area, a few fields...</center></td></tr>
<tr><td><center>
<input type="text" ID="test1" name="test1" onfocus="fieldfocus(this.id);" />
<input type="text" ID="test2" name="test2" onfocus="fieldfocus(this.id);" />
<input type="text" ID="test3" name="test3" onfocus="fieldfocus(this.id);" /></center></td></tr>
<tr><td height="29"><table align="center">
<tr><td><input type="button" id="a" value="a" onclick="keypressed(this.value);" />
        <input type="button" id="b" value="b" onclick="keypressed(this.value);" />
        <input type="button" id="c" value="c" onclick="keypressed(this.value);" /></td><tr>
</table></td></tr>
</table>
</body>
</html>

LOL, just realized while going over it, that it is basically just TWO LINES! And, a few onclicks and onfocus’s… LOL, isn’t programming fun!

searls03 · March 21, 2012, 8:48pm

one thing, how do i Make a delete button? just deletes one letter at a time.

ErnieAlex · March 21, 2012, 9:29pm

Well, a string is a string… Just use substr with a length of the textfield -1…

The code I gave you is basically string code. It pulls the string from the field and then adds your char pressed to the end of it. So, you would have to use, let’s say the backspace key and get the text from the current textfield. Then, save it back to the current field with substr and a length minus 1. That would “in effect” backspace one char.

In this manner, you can create an entire keyboard. You could put it into pop up or just on-screen. You would have to add a flag for the SHIFT key. Press a SHIFT once and it is on and press it again to turn it off. Should be easy, just will need some logic laying it all out… Good luck…

searls03 · March 21, 2012, 9:32pm

haha. right as the message came through, I figured it out. haha