dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Simulated touch-screen keyboard: Pass letters to a text input field?

  1. #1
    Join Date
    Jan 2005
    Posts
    3

    Question Simulated touch-screen keyboard: Pass letters to a text input field?

    I'm an HTML expert, but a cut-and-paster when it comes to JavaScript.

    We have to put a graphical keyboard on a touch-screen kiosk, because these things don't have actual keyboards. They want to get info from the user, so to get Joe's name, Joe presses the buttons J, O, and E on the screen, and we need these letters to show up one by one in the text input field, of course allowing for deleting also.

    So if I have a form that contains these buttons (A through Z, etc.) and also the Submit button...

    I guess the big question is - is this even possible, using JavaScript?

  2. #2
    Join Date
    Oct 2004
    Posts
    1,118
    My first question is: how much are you getting paid? If you want someone to write scripts for your project, it only seems fair they get paid as well.

    Second, I'm not sure if it is possible. Javascript is activated by events, like onkeydown or onkeypress. Since you don't have a keyboard, I'm not sure how you can get javascript to react to user input. With js, you can call those events manually to get them to fire, but I'm not sure how your keyboard program would interface with js to do that.

  3. #3
    Join Date
    Jan 2005
    Location
    U S A
    Posts
    59
    Maybe you could try something like this.
    Attached Files Attached Files
    We are to admit no more causes of natural things than such as are both true and sufficient to explain their appearances. - Isaac Newton

  4. #4
    Join Date
    Jan 2005
    Posts
    3

    Muchas gracias

    Many thanks, Elegidito -

    I owe you a favor, if you need any design/Photoshop help, please let me know.

    Related question - if there is a second or third field, and the user finishes populating one field, then taps the second field to change the focus - how do I get the letters to start showing up in the second and third field?

  5. #5
    Join Date
    Jul 2004
    Posts
    43
    You could add this to let the user traverse the keyboard easier:
    (slightly modified code that I found on the Internet) It'll need tweaking, of course, but the idea is there.

    Code:
    function checkArrows (field, evt) {
      var keyCode = 
        document.layers ? evt.which :
        document.all ? event.keyCode :
        document.getElementById ? evt.keyCode : 0;
      var r = '';
      if (keyCode == 39)
      {
        r += 'arrow right';
        return true;
        }
      else if (keyCode == 40)
      {
        r += 'arrow down';    
        return true;
       }
      else if (keyCode == 38)
      {
        r += 'arrow up';
        return true;
      }
      else if (keyCode == 37)
      {
        r += 'arrow left';
      	return true;  
      }
      else if (keyCode == 13)
      {
     // alert('test');
      document.activeElement.click = true;
      }
      r += ' ' + keyCode;
      return false;
    }

  6. #6
    Join Date
    Jan 2005
    Location
    U S A
    Posts
    59
    I'm glad to know that I helped.

    As for your second question, with multiple inputs, I used a hidden input to store the focused field. The changes are included in the attachment.

    Hope that fixes it for you.
    Attached Files Attached Files
    Last edited by Elegidito; 01-31-2005 at 06:42 PM.
    We are to admit no more causes of natural things than such as are both true and sufficient to explain their appearances. - Isaac Newton

  7. #7
    Join Date
    Jan 2005
    Posts
    3

    How to erase an entered value on focus?

    We have this working with images with rollover states, but one more thing - if there is text in a field, and someone touches that field to change what's typed, we want it to erase what is there, but can't seem to get it happening.

    The latest code is attached.
    Attached Files Attached Files

  8. #8
    Join Date
    May 2008
    Posts
    1

    Thanks folks!

    About 3 years later, I found this post and it was very useful!
    Thanks for the script Elegidito. Here is my version.
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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