2012-03-23 49 views
0

好的,任何人都可以幫忙嗎?jquery鍵入字母作爲移動鍵盤

我有信無功ARR數組= [A,B,C] 我想實現像手機打字(舊:)

如果用戶在2秒內的jquery「LL任何地方點擊一次在文本框中放入一個字母a。如果用戶在兩級秒鐘的jquery點擊兩次「要是把字母b到文本框,螞蟻,還有c,如果他點擊三次,在兩秒鐘......

謝謝

這是我有: 情況:

      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++; 
+0

首先,它應該是'變種ARR = [ 「一」, 「B」, 「C」]'。你到目前爲止嘗試過什麼? – slash197 2012-03-23 12:40:46

+4

[你有什麼試過](http://mattgemmell.com/2008/12/08/what-have-you-tried/)到目前爲止?我希望你不要指望我們爲你寫代碼。 – 2012-03-23 12:41:04

+0

好的我edditet,這是我到現在爲止的代碼 – Avicena00 2012-03-23 12:47:02

回答

0

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(); 

});​