java script mobile character keypad
<p>hi i use the following codes for using mobile keypad... i use two text box, but the keypad focusing only one text box... how to display individually char in individual text box... here is the coding...</p>

<pre><code>&lt;script type="text/javascript"&gt;

var keys = []; //hash array that will hold the characters that correspond to a key
var modes = ['abc','ABC','123']; //write message mode: abc=lowercase letter, ABC=uppercase letter, 123=number
var modeIndex = 0; //default is lowercase ('abc')
var appendChar = true; //flag that tells if the character is appended or not
var keyDown = false; //flag that tells if the key is held down or not
var prevNum = null; //flag that remembers the previous key pressed
var timer; //the timer for function call delay
var delay = 2000; //2 seconds delay
var maxSmsLen = 160; //maximum length of SMS message



function addKey(num, arrChar){
  keys[num] = new Object();
  keys[num].ctr = 0;
  keys[num].chars = arrChar;
}

//add corresponding characters for each key
//change characters as needed (lowercase characters only)
addKey('1', ['.',',','?','!','1','@','\'','-','_','(',')',':',';','&amp;','/','~','\\','%','*','#','+','&lt;','=','&gt;','"','€','£','$','¥','¤','§','¡','¿']);
addKey('2', ['a','b','c','2','A','B','C']);
addKey('3', ['d','e','f','3','D','E','F']);
addKey('4', ['g','h','i','4','G','H','I']);
addKey('5', ['j','k','l','5','J','K','L']);
addKey('6', ['m','n','o','6','M','N','O']);
addKey('7', ['p','q','r','s','7','P','Q','R','S']);
addKey('8', ['t','u','v','8','T','U','V']);
addKey('9', ['w','x','y','z','9','W','X','Y','Z']);
addKey('0', [' ','0']);



function keypad(num, lcd, ctrId)
{
            var str;
    keyDown = true;
    if (prevNum != null &amp;&amp; prevNum != num) {
        appendChar = true;
    }
    if (keys[num].ctr &gt; keys[num].chars.length-1 || appendChar) {
        keys[num].ctr = 0; //go back to first item in keypad
    }
    var ch = getChar(num);
    if (appendChar) { //append character
        str = lcd.value + ch;
    }
    else { //replace character
        str = (lcd.value.length==0) ? ch : lcd.value.substring(0, lcd.value.length-1) + ch;
    }

    if (maxSmsLen - str.length &gt;= 0){
        document.getElementById(ctrId).innerHTML = maxSmsLen - str.length;
        lcd.value = str;
    }
    else{
        return;
    }
    keys[num].ctr++;
    prevNum = num;

    //reset flag and timer
    appendChar = false;
    clearTimeout(timer);

    timer = setTimeout(
      function(){
          if (keyDown) {
              //replace letter with number when the key is held down for 2 seconds
              lcd.value = lcd.value.substring(0, lcd.value.length-1) + num;
          }
          lcd.focus();
          appendChar = true;
      }, delay);
}

function clearIt(lcd, ctrId){
    clearTimeout(timer);
    keyDown = true;

    //delete last character
    lcd.value = lcd.value.substring(0, lcd.value.length-1);
    document.getElementById(ctrId).innerHTML = maxSmsLen - lcd.value.length;

    //delay the focus to avoid conflict with clear button focus
    setTimeout(
        function(){
            lcd.focus();
        }, 1);

    //delete all text when delete key is held down for 2 seconds
    timer = setTimeout(
        function(){
            if (keyDown){
                lcd.value = '';
                document.getElementById(ctrId).innerHTML = maxSmsLen;
            };
            lcd.focus();
        }, delay);
}

function resetKey(){
    keyDown = false;
}

function getChar(num){
    var ch = keys[num].chars[keys[num].ctr];
    switch (modeIndex){
      case 0: //lowercase letter
        return ch;
      case 1: //uppercase letter
        return ch.toUpperCase();
      case 2: //number
      return num;
      default: //for safety
        return ch;
    }
}

function setMode(modeId){
    modeIndex++;
    if (modeIndex &gt; 2){
        modeIndex = 0;
    }
    document.getElementById(modeId).innerHTML = modes[modeIndex];
    appendChar = true;
}



&lt;table width="1351" height="647" border="0" align="center" bordercolor="#0E1B45" bgcolor="#FFFFFF"&gt;
</code></pre>

<p>
    
      
        
          
              
          
        
      
      
        
          
              
            </p>

<pre><code>    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;&lt;/td&gt;
  &lt;td bgcolor="#000066"&gt;
      &lt;td width="435" bgcolor="#000066" id="show" style="display: none"&gt;&lt;h2 class="style1"&gt;&lt;span id="mode"&gt;abc&lt;/span&gt;

&lt;span id="ctr"&gt;160&lt;/span&gt;&lt;/h2&gt;
</code></pre>


    
    
    



    
    
    



    
    
     



  
  
    


<pre><code>  &lt;/td&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tbody&gt;
</code></pre>

<p>
    </p>
