PhoneGap/Android自定義鍵盤

Question

我正在開發具有多個input[type=numer]元素的應用程序。僅適用於Android。

內置數字鍵盤有兩個問題：

* it's inconsistent (different on different versions of Android) 
* it has unnecessary keys (space, dash, comma and "next") which add confusion. 

我想有一個鍵盤只有numbers, comma and backspace。那可能嗎？

編輯Oct 3，2013。第三個問題出現了，這是迄今爲止最糟糕的。它看起來像三星決定從他們的數字鍵盤上跳過十進制字符（「。」），至少是當input[type=numer]在瀏覽器中獲得焦點時彈出的那個。看起來所有的Galaxy S4設備都受到影響（我在S4 Mini上看到過它，我沒有許多三星設備......我看到的只有Nexus愛好者:-)）。我在Google上找不到太多關於這個問題的消息，但我已經看到Galaxy S4用戶在2012年抱怨過它（幾周前我已經在一個S3上嘗試過了，它確實沒問題）。長篇小說經過仔細考慮，我決定在html/javascript中實現我自己的鍵盤（三星太重要了，我因爲它而得到不好的評論，我不認爲我可以做任何事情修理它）。我正在重寫我的應用程序，當我完成時，我會嘗試記住並講述故事。

編輯2013年12月3日。我目前的解決方案（仍處於alpha階段，應用程序重寫使我比我預期的時間更長）是一個完全用JavaScript實現的鍵盤。我使用常規<範圍>元素而不是<輸入>以防止OS鍵盤彈出。作爲一個額外的好處，我可以控制鍵盤的所有內容，所以我添加了一些算術鍵（x， - ，*，/，（和）），用戶可以輸入表達式，例如「3x（2 + 5.5 ）「而不是」15「。準備好後我會鏈接到應用程序（至少還有幾周）。

Answer 1

當然可以。

首先，配置你的活動從不顯示鍵盤（嘗試android：windowSoftInputMode =「stateAlwaysHidden」）。如果EditText堅持把它拉出來，你可能會遇到一些問題，但是你可以使用基於TextView的模擬EditText來繞過它，或者繼承EditText並重寫一些方法。這裏有多個指南，如下所示：Close/hide the Android Soft Keyboard

其次，創建您自己的UI鍵盤元素，使用您想要的任何按鈕然後按照您想要的佈局，並按下此鍵盤上的按鈕，爲每次按下，追加適當的字符到EditText/TextView的顯示文本。

也就是說，用戶可能不喜歡它。儘管您討厭每個設備的鍵盤看起來都不一樣，但每個用戶都可以使用將用於自己的鍵盤，並希望在編輯文本時看到它。我敦促你重新考慮。

Answer 2

感謝您的更新。這是我如何實施它。這可能與你如何做相似。我很好奇你到目前爲止遇到了哪些問題。

我還沒有把它移到生產環境中，所以仍然在測試，但它似乎迄今爲止工作得很好。我已經從下面的代碼中刪除了一些驗證，使其更短...

基本上鍵盤是iPad上的1行和手機上的2行。它支持「鍵盤」類的任何輸入字段，並突出顯示整個「.keyboard-item」，因此用戶可以清楚它們正在更新哪個字段。

<div id="stuff"> 
     <ul> 
      <li> <label for="name">Name</label> </li> 
      <li> <input type="text" id="name" class="required"/> </li> 
     </ul> 
     <ul class="keyboard-item"> 
      <li> <label for="number">#</label> </li> 
      <li> <input type="text" id="number" class="keyboard required" pattern="[0-9]*" readonly="readonly" onkeypress="dosomething(this)"/> </li> 
     </ul> 
    </div> 

    <div class="mobile-number-keyboard"> 
     <div class="mobile-number-keyboard1"> <span style="padding-left: 20px;">0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span style="padding-right: 20px;">5</span> </div> 
     <div class="mobile-number-keyboard2"> <span style="padding-left: 20px;">6</span> <span>7</span> <span>8</span> <span>9</span> <span style="width: 8px;">.</span> <span style="padding-right: 20px;"><</span> </div> 
    </div> 

<style> 
    .mobile-number-keyboard { width: 101%; height: 40px; margin: auto; margin-bottom: 20px; } 
    body.phone .mobile-number-keyboard { height: 80px; } 
    .mobile-number-keyboard span { float: left; padding: 8px 22px; border: 1px outset White; cursor: pointer; background-color: #4F81BD; color: White; } 
    .mobile-number-keyboard span:hover { background-color: #87CEFA; } 
    .mobile-number-keyboard span:active { border-style: inset; background-color: #00E5EE; } 
    body.phone .mobile-number-keyboard2 { clear: both; height: 40px; } 
    .keyboard-focus { background: #FFC1C1; border: 1px solid red; } 
    .keyboard-item-focus { background: #00E5EE; } 
</style> 

<script> 
    function initCustomKeyboard(jContainer) { 
      jContainer.find('input, select, textarea').click(function() { 
       $('.keyboard-focus').removeClass('keyboard-focus'); 
       $('.keyboard-item-focus').removeClass('keyboard-item-focus'); 

       var me = $(this); 

       if (me.hasClass('keyboard')) { 
        me.addClass('keyboard-focus'); 
        var parent = me.parent(); 

        if (parent.hasClass('keyboard-item')) { 
         parent.addClass('keyboard-item-focus'); 
        } else { 
         parent = parent.parent(); 

         if (parent.hasClass('keyboard-item')) { 
          parent.addClass('keyboard-item-focus'); 
         } else { 
          parent = parent.parent(); 

          if (parent.hasClass('keyboard-item')) { 
           parent.addClass('keyboard-item-focus'); 
          } 
         } 
        } 
       } 
      }); 

      jContainer.find('.mobile-number-keyboard').find('span').click(function() { 
       var me = $(this); 
       var val = me.text(); 
       var box = jContainer.find('.keyboard-focus'); 

       var bval = box.val(); 
       var blen = bval.length 

       if (box.length > 0) { 
        if (val === '<') { 
         if (blen === 0) { return; } 

         if (blen > 1 && bval.substring(blen-2, blen-1) === ' ') { 
          box.val(bval.substring(0, blen - 2)); 
         } else { 
          box.val(bval.substring(0, blen - 1)); 
         } 

         var whichCode = 8; 
        } else { 
         var max = box.attr('maxlength'); 
         var whichCode = val.charCodeAt(0); 

         if (max === undefined || parseInt(max) > blen) { 
          box.val(bval + val); 
         } else { 
          return; 
         } 
        } 

        var ev = $.Event('keydown'); 
        ev.which = whichCode; 
        box.trigger(ev); 

        ev = $.Event('keypress'); 
        ev.which = whichCode; 
        box.trigger(ev); 

       ev = $.Event('keyup'); 
        ev.which = whichCode; 
        box.trigger(ev); 
       } 
      }); 
     } 

    $(function() { initCustomKeyboard('#stuff'); } 
</script>