Onscreen keypads

searls03 · 11-21-2012, 05:21 PM

hey, has anyone seen a code out there seen an onscreen keyboard that will insert text into whatever field is currently active? I can do it with only one input, but I can't get it to insert into the active field. anything you guys have seen?

Philip M · 11-21-2012, 06:17 PM

You need to capture the id of the field which currently has focus.

Here you are:-

Code:

<!DOCTYPE html>
<head>
<title>Alpha Touchscreen</title>

<style type='text/css'>
.touch {
border:1px solid black;
margin-top:6px;
font-family:tahoma,sans-serif;
font-size:15px;
background-color:#999999;
color:white;
width:25px;
height:25px;
}
#touchDiv {text-align:center;}
</style>


<script type='text/javascript'>

var caps = false;

function addIt(cKey)  {
var val = cKey.value;
if (val  == "Space") {val = " "}  // space
if (val == "Caps") {
val = "";
caps == true? caps = false : caps = true;  // toggle caps
}
if (!caps) {document.getElementById("cbutton").style.color = "white"}
if (caps) {
val = val.toUpperCase();
document.getElementById("cbutton").style.color = "red";
}
d = document.getElementById(theid);
d.value =  (val == "<") ? d.value.slice(0,-1) : d.value+val;  // backspace
}

function getID(which){
theid = which.id;  // must be global
}

</script>

</head>

<body>
<div id='touchDiv'>
<input class=touch type=button value=q onclick="addIt(this)"> 
<input class=touch type=button value=w onclick="addIt(this)">
<input class=touch type=button value=e onclick="addIt(this)">
<input class=touch type=button value=r onclick="addIt(this)">
<input class=touch type=button value=t onclick="addIt(this)">
<input class=touch type=button value=y onclick="addIt(this)">
<input class=touch type=button value=u onclick="addIt(this)">
<input class=touch type=button value=i onclick="addIt(this)">
<input class=touch type=button value=o onclick="addIt(this)">
<input class=touch type=button value=p onclick="addIt(this)">
<input class=touch type='button' value= "<" onclick="addIt(this)">
<br>
<input class=touch type=button value=a onclick="addIt(this)">
<input class=touch type=button value=s onclick="addIt(this)">
<input class=touch type=button value=d onclick="addIt(this)">
<input class=touch type=button value=f onclick="addIt(this)">
<input class=touch type=button value=g onclick="addIt(this)">
<input class=touch type=button value=h onclick="addIt(this)">
<input class=touch type=button value=j onclick="addIt(this)">
<input class=touch type=button value=k onclick="addIt(this)">
<input class=touch type=button value=l onclick="addIt(this)">
<br>
<input class=touch type=button value=z onclick="addIt(this)">
<input class=touch type=button value=x onclick="addIt(this)">
<input class=touch type=button value=c onclick="addIt(this)">
<input class=touch type=button value=v onclick="addIt(this)">
<input class=touch type=button value=b onclick="addIt(this)">
<input class=touch type=button value=n onclick="addIt(this)">
<input class=touch type=button value=m onclick="addIt(this)">
<br>
<input class=touch type=button id = "cbutton" value="Caps" style='width:84px' onclick="addIt(this)">
<input class=touch type=button value="Space" style='width:84px' onclick="addIt(this)">

<br>

<form name="myform" action="">
<br><br>
<input type='text' size = "50" name="textbox1" id = "textbox1" onfocus = "getID(this)">
<br>
<input type='text' size = "50" name="textbox2" id = "textbox2" onfocus = "getID(this)">
<br>
<input type='text' size = "50" name="textbox3" id = "textbox3" onfocus = "getID(this)">

</form>
</div>
</body>
</html>

“There are two kinds of failures: those who thought and never did, and those who did and never thought.” - Dr. Laurence J. Peter quotes (American "hierarchiologist", Educator and Writer, 1919-1990)

searls03 · 11-24-2012, 03:19 PM

thanks! it works great. one question tho, is there anyway to make it so that when I select the text it will overwrite it.....currently, even if I select text, it adds to the end just like it would if the cursor was at the end of the text

Philip M · 11-24-2012, 03:40 PM

If you mean erase the field content on focus,

Code:

function getID(which){
theid = which.id;
//  document.getElementById(theid).value = "";  // if desired to erase field content on focus
}

searls03 · 11-24-2012, 05:54 PM

close, but I don't want on focus, I only want it to overwrite if it is selected. so I have the word knee, and I want to only change the two "e"'s, I would like to highlight them, then be able to use the keypad and replace the two letters....not by pushing delete twice

Philip M · 11-24-2012, 06:16 PM

Quote:

Originally Posted by searls03

close, but I don't want on focus, I only want it to overwrite if it is selected. so I have the word knee, and I want to only change the two "e"'s, I would like to highlight them, then be able to use the keypad and replace the two letters....not by pushing delete twice

Hmm. I think I'll leave it to you to work that out for yourself. It requires a good deal of code.
http://stackoverflow.com/questions/6...an-input-field
How do you plan to delete the unwanted letters?

It seems inconsistent to use an on-screen keyboard but expect users to select text with their mouse. What is wrong with backspacing twice?
And in any case it is a lot quicker to simply type text into a textbox without the palaver of having to use an on-screen keyboard.