473,325 Members | 2,828 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Need help with a javascript virtual keyboard for TextBox

1
hi i recently used a virtual keyboard from www.codeproject.com/jscript/jvk.asp.
However this part of the code

Expand|Select|Wrap|Line Numbers
  1. function keyb_callback(ch)
  2.    {
  3.      var text = document.getElementById("textfield"), val = text.value;
  4.  
  5.      switch(ch)
  6.      {
  7.        case "BackSpace":
  8.          if(val.length)
  9.          {
  10.            var span = null;
  11.  
  12.            if(document.selection)
  13.              span = document.selection.createRange().duplicate();
  14.  
  15.            if(span && span.text.length > 0)
  16.            {
  17.              span.text = "";
  18.              getCaretPositions(text);
  19.            }
  20.            else
  21.              deleteAtCaret(text);
  22.          }
  23.  
  24.          break;
  25.  
  26.        default:
  27.          insertAtCaret(text, (ch == "Enter" ? (window.opera ? '\r\n' : '\n') : ch));
  28.      }
  29.    }
  30.  
  31.    // This function retrieves the position (in chars, relative to
  32.    // the start of the text) of the edit cursor (caret), or, if
  33.    // text is selected in the TEXTAREA, the start and end positions
  34.    // of the selection.
  35.    //
  36.    function getCaretPositions(ctrl)
  37.    {
  38.      var CaretPosS = -1, CaretPosE = 0;
  39.      ctrl.focus();
  40.  
  41.      // Mozilla way:
  42.      if(ctrl.selectionStart || (ctrl.selectionStart == '0'))
  43.      {
  44.        CaretPosS = ctrl.selectionStart;
  45.        CaretPosE = ctrl.selectionEnd;
  46.  
  47.        insertionS = CaretPosS == -1 ? CaretPosE : CaretPosS;
  48.        insertionE = CaretPosE;
  49.      }
  50.      // IE way:
  51.      else if(document.selection && ctrl.createTextRange)
  52.      {
  53.        // The current selection:
  54.        var range;
  55.        if(ctrl.tagName.toLowerCase() == "input")
  56.        {
  57.          range = ctrl.createTextRange();
  58.        }
  59.        else if(ctrl.tagName.toLowerCase() == "textarea")
  60.        {
  61.          range = document.selection.createRange();
  62.        }
  63.  
  64.        // We'll use this as a 'dummy':
  65.        var stored_range = range.duplicate();
  66.  
  67.        // Select all text:
  68.        stored_range.moveToElementText(ctrl);
  69.  
  70.        // Now move 'dummy' end point to end point of original range:
  71.        stored_range.setEndPoint('EndToEnd', range);
  72.  
  73.        // Now we can calculate start and end points:
  74.        insertionS = stored_range.text.length - range.text.length;
  75.        insertionE = insertionS + range.text.length;
  76.      }
  77.    }
  78.  
  79.    function setRange(ctrl, start, end)
  80.    {
  81.      if(ctrl.setSelectionRange) // Standard way (Mozilla, Opera, ...)
  82.      {
  83.        ctrl.setSelectionRange(start, end);
  84.      }
  85.      else // MS IE
  86.      {
  87.        ctrl.focus();
  88.  
  89.        var range;
  90.  
  91.        try
  92.        {
  93.          range = ctrl.createTextRange();
  94.        }
  95.        catch(e)
  96.        {
  97.          try
  98.          {
  99.            range = document.body.createTextRange();
  100.            range.moveToElementText(ctrl);
  101.          }
  102.          catch(e)
  103.          {
  104.            range = null;
  105.          }
  106.        }
  107.  
  108.        if(!range) return;
  109.  
  110.        range.collapse(true);
  111.        range.moveStart("character", start);
  112.        range.moveEnd("character", end - start);
  113.        range.select();
  114.      }
  115.  
  116.      insertionS = start;
  117.      insertionE = end;
  118.    }
  119.  
  120.    function deleteSelection(ctrl)
  121.    {
  122.      if(insertionS == insertionE) return;
  123.  
  124.      var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value;
  125.      ctrl.value = tmp.substring(0, insertionS) + tmp.substring(insertionE, tmp.length);
  126.  
  127.      setRange(ctrl, insertionS, insertionS);
  128.    }
  129.  
  130.    function deleteAtCaret(ctrl)
  131.    {
  132.      // if(insertionE < insertionS) insertionE = insertionS;
  133.      if(insertionS != insertionE)
  134.      {
  135.        deleteSelection(ctrl);
  136.        return;
  137.      }
  138.  
  139.      if(insertionS == insertionE)
  140.        insertionS = insertionS - 1;
  141.  
  142.      var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value;
  143.      ctrl.value = tmp.substring(0, insertionS) + tmp.substring(insertionE, tmp.length);
  144.  
  145.      setRange(ctrl, insertionS, insertionS);
  146.    }
  147.  
  148.    // This function inserts text at the caret position:
  149.    //
  150.    function insertAtCaret(ctrl, val)
  151.    {
  152.      if(insertionS != insertionE) deleteSelection(ctrl);
  153.  
  154.      if(document.createEvent && !window.opera)
  155.      {
  156.        var e = document.createEvent("KeyboardEvent");
  157.  
  158.        if(e.initKeyEvent)
  159.        {
  160.          e.initKeyEvent("keypress",        // in DOMString typeArg,
  161.                         false,             // in boolean canBubbleArg,
  162.                         true,              // in boolean cancelableArg,
  163.                         null,              // in nsIDOMAbstractView viewArg, specifies UIEvent.view. This value may be null;
  164.                         false,             // in boolean ctrlKeyArg,
  165.                         false,             // in boolean altKeyArg,
  166.                         false,             // in boolean shiftKeyArg,
  167.                         false,             // in boolean metaKeyArg,
  168.                         null,              // key code;
  169.                         val.charCodeAt(0));// char code.
  170.  
  171.          ctrl.dispatchEvent(e);
  172.        }
  173.      }
  174.      else
  175.      {
  176.        var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value;
  177.        ctrl.value = tmp.substring(0, insertionS) + val + tmp.substring(insertionS, tmp.length);
  178.      }
  179.  
  180.      setRange(ctrl, insertionS + val.length, insertionS + val.length);
  181.    }
work well with textarea on IE but many errors arise when used on a textbox

Some errors include
The words are appended to the front of the orginals word
Insertion/delete in the middle does not work

I am on a tight schedule so i hope u guys can help me solve my problem asap.
Thanks
Jul 11 '07 #1
1 4669
Hi,

the script you're talking about was updated:

http://www.codeproject.com/jscript/jvk.asp

Advanced callback function (that you quote) was updated too; it doesn't have any problems with either TEXTAREA and INPUT of type="text".

Best regards.
Jul 13 '07 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: visual basic dummy | last post by:
I have taken a course at the local college. It is called Advanced Languages and this course will cover C++, Perl and Javascript. I must pass this course. In January/Feb we covered a 1000+page...
2
by: Steven Malcolm | last post by:
Hi I am trying to build an application at work which will use a virtual keyboard on a touch screen. I have searched the archives and found references but nothing to download. If anyone has...
8
by: Jo Segers | last post by:
Hi, How can I restrict the keyboard input in a textBox to 0..9? In the keydown event KeyValue is get only. Where can I alter the keyboard input? Mvg,
1
by: Roshawn Dawson | last post by:
Hi, Could someone tell how to force a mouse event using either jscript or javascript? I simply want to allow users to scroll the page after postbacks using the scroll button on either a mouse...
7
by: Benton | last post by:
Hi there, I have a text box which will receive its value from a pop-up date picker. The user should not be able to edit this field with the keyboard or mouse. I am using ASP.NET. If I set the...
6
by: dieselmachine | last post by:
Hey, I've been searching for info on this for days now, but to no avail. I'm starting to think it's impossible, but anyway! I've coded a little virtual keyboard, which has two octaves worth of...
4
by: Sirisha | last post by:
I have one textbox for enter telephone numbers. i want that text box can accepts only 0 to 9 digits and one sapcace, -,special characters. I want Javascript script validation for that text box.
6
by: =?Utf-8?B?Sm9obiBBdXN0aW4=?= | last post by:
The HP t5520 Windows CE based thin client comes with a browser called 'Internet Explorer' - iehp.exe. It appears to have Java script (Request.Browser.JavaScript = True). I want to use this browser...
2
by: manusiatidakbiasa | last post by:
Hi, I am new in javascript, I am currently building a simple website, and I like to make a keyboard shortcut so when someone press ctrl-1, it will give keyboard focus to a textbox can...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.