Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onscreen keypads

    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?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,149
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,149
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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
    }

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,149
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by searls03 View Post
    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.
    Last edited by Philip M; 11-24-2012 at 06:25 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •