Jqueryはモバイルキーボードとして文字を入力します

Question

誰でも手助けできますか？

私は手紙のVaRのARRの配列を持っているユーザーは2秒jqueryのっで一度どこかをクリックした場合= [a、b、c]の 私は携帯電話のタイピングのようなもの（古い:)

を実現したいですテキストボックスに手紙aを入れる。 ケース：彼は2秒に3回クリックした場合...

これは私が持っているものである

ありがとうcのユーザーが「2秒のjqueryの中で二回クリックした場合も、テキストボックスにでantを文字Bを置くでしょう：ここでは

      var myInterval = setInterval(function() { 
           countLetters=0; 

          }, 2000); 
         } 


         var sellectedBoxLetters = $('div.gh_h2.gh_v1.js_item.selected').attr('title'); //this gets array of 3 letters a, b, c 
         if (sellectedBoxLetters != null) 
          substr = sellectedBoxLetters.split(' '); // this gets letter by letter 

          $("input#search").val($('input#search').val() + substr[countLetters]); //this puts the value into the box but without hops ..all letters 
          countLetters++; 

Answer 1

http://jsfiddle.net/VseSj/5/

あなたはそれがスタートだ、私はとにかく退屈していた、行くと、それは確かに完成していないが、それはどこかにあなたを取得する必要があります。

HTML：

<div> 
    <textarea id="txt"></textarea> 
</div> 
<div> 
    <table> 
     <tr> 
      <th colspan="3"><input id="btn1" type="button" value="<="></th> 
     </tr> 
     <tr> 
      <td><input id="btn1" type="button" value=". ! ?" data-value=".!?"></td> 
      <td><input id="btn2" type="button" value="a b c" data-value="abc"></td> 
      <td><input id="btn3" type="button" value="d e f" data-value="def"></td> 
     </tr> 
     <tr> 
      <td><input id="btn4" type="button" value="g h i" data-value="ghi"></td> 
      <td><input id="btn5" type="button" value="j k l" data-value="jkl"></td> 
      <td><input id="btn6" type="button" value="m n o" data-value="mno"></td> 
     </tr> 
     <tr> 
      <td><input id="btn7" type="button" value="p q r s" data-value="pqrs"></td> 
      <td><input id="btn8" type="button" value="t u v" data-value="tuv"></td> 
      <td><input id="btn9" type="button" value="v w x z" data-value="cwxz"></td> 
     </tr> 
     <tr> 
      <td><input id="btnstar" type="button" value="*" data-value="*"></td> 
      <td><input id="btn0" type="button" value="_" data-value=" "></td> 
      <td><input id="btncross" type="button" value="#" data-value="#"></td> 
     </tr> 
    </table> 
</div>​ 

JS：

var keyboard = { 
    clickspan: 2000, 
    clicked: false, 
    clickedId: "", 
    clickedCount: 0, 
    oldval: "", 
    newval: "", 
    timeout: null, 
    init: function() { 
     $("td input").click(function() { 

      if (keyboard.clicked && keyboard.clickedId == $(this).attr("id")) { 

       keyboard.newval = keyboard.oldval + $(this).data("value").charAt(keyboard.clickedCount); 
       keyboard.clickedCount = (keyboard.clickedCount + 1) % $(this).data("value").length; 
       clearTimeout(keyboard.timeout); 
       keyboard.timeout = setTimeout(function() { 
        keyboard.clicked = false; 
       }, keyboard.clickspan); 

      } else { 
       keyboard.oldval = $("#txt").val(); 
       keyboard.setClicked($(this).attr("id")); 
       keyboard.newval = keyboard.oldval + $(this).data("value").charAt(keyboard.clickedCount); 
       keyboard.clickedCount = (keyboard.clickedCount + 1) % $(this).data("value").length; 
      } 

      $("#txt").val(keyboard.newval); 
     }); 

     $("th input").click(function() { 
      keyboard.oldval = $("#txt").val(); 
      var oldvallength = keyboard.oldval.length; 
      $("#txt").val(keyboard.oldval.substring(0, oldvallength - 1)); 
     }); 
    }, 
    setClicked: function(id) { 
     keyboard.clicked = true; 
     keyboard.clickedId = id; 
     keyboard.clickedCount = 0; 
     keyboard.timeout = setTimeout(function() { 
      keyboard.clicked = false; 
     }, keyboard.clickspan); 
    } 

}; 

$(document).ready(function() { 
    keyboard.init(); 

});​