फोनगैप/एंड्रॉइड कस्टम कीबोर्ड

Question

मैं एकाधिक input[type=numer] तत्वों के साथ एक ऐप विकसित कर रहा हूं। केवल एंड्रॉइड के लिए।

में निर्मित सांख्यिक कीबोर्ड है दो समस्याओं:

* 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 के साथ एक कुंजीपटल है करना चाहते हैं। क्या यह संभव है?

3 अक्टूबर, 2013 संपादित करें। एक तीसरी समस्या दिखाई दी और यह अब तक का सबसे खराब है। ऐसा लगता है कि सैमसंग ने अपने संख्यात्मक कीबोर्ड से दशमलव वर्ण ("।") को छोड़ने का फैसला किया है, कम से कम वह व्यक्ति जो input[type=numer] ब्राउज़र में फ़ोकस प्राप्त करता है। ऐसा लगता है कि सभी गैलेक्सी एस 4 डिवाइस प्रभावित हैं (मैंने इसे एस 4 मिनी पर देखा है, मेरे पास कई सैमसंग उपकरणों तक पहुंच नहीं है ... मैं देखता हूं कि नेक्सस प्रेमी हैं :-))। मुझे Google में इस मुद्दे के बारे में बहुत कुछ नहीं मिला, लेकिन मैंने गैलेक्सी एस 4 उपयोगकर्ताओं को 2012 में इसके बारे में शिकायत की है (मैंने इसे कुछ हफ्ते पहले एक एस 3 पर आजमाया है और यह ठीक था)।

लंबी कहानी संक्षेप में, एक सावधानी से विचार मैं HTML/जावास्क्रिप्ट में अपने खुद के कुंजीपटल लागू करने के लिए (सैमसंग भी महत्वपूर्ण है, मैं बुरा समीक्षा सिर्फ इसलिए इसके बारे में हो रही है और मुझे नहीं लगता कि मैं करने के लिए कुछ भी कर सकते हैं का फैसला किया है के बाद इसे ठीक करो)। मैं अपने ऐप को फिर से लिखने की प्रक्रिया में हूं, जब मैं कर रहा हूं तो मैं कहानी को याद रखने और कहने की कोशिश करूंगा।

3 दिसंबर, 2013 संपादित करें। मेरा वर्तमान समाधान (अभी भी अल्फा चरण में, ऐप रीराइटिट मुझे अपेक्षा से अधिक लंबा रास्ता लेता है) एक कीबोर्ड पूरी तरह से जावास्क्रिप्ट में लागू होता है। ओएस कीबोर्ड को पॉपिंग से रोकने के लिए मैंने < इनपुट > के बजाय नियमित < अवधि > तत्वों का उपयोग किया। एक अतिरिक्त लाभ के रूप में, मुझे कीबोर्ड के बारे में सबकुछ नियंत्रित करना पड़ता है, इसलिए मैंने कुछ अंकगणितीय कुंजी (x, -, *, /, (और)) जोड़ दी और उपयोगकर्ता अभिव्यक्तियों में टाइप कर सकते हैं, उदाहरण के लिए "3x (2 + 5.5) "के बजाय" 15 "। जब यह तैयार हो जाए तो मैं ऐप से लिंक करूंगा (अभी भी कम से कम कुछ हफ्तों)।

Answer 1

निश्चित रूप से यह है।

सबसे पहले, कीबोर्ड को कभी भी दिखाने के लिए अपनी गतिविधि को कॉन्फ़िगर करें (एंड्रॉइड: windowSoftInputMode = "stateAlwaysHidden" का प्रयास करें)। यदि संपादन टेक्स्ट ने इसे खींचने पर जोर दिया है, तो आपको कुछ समस्याएं हो सकती हैं, लेकिन आप टेक्स्टव्यू के आधार पर एक नकली संपादन टेक्स्ट बना सकते हैं, या इसके आसपास जाने के लिए संपादित करें और कुछ विधियों को ओवरराइड कर सकते हैं। उस पर कई मार्गदर्शिकाएं हैं, जैसे कि: Close/hide the Android Soft Keyboard

दूसरा, अपने स्वयं के यूआई-कीबोर्ड तत्व बनाएं, जो भी आप चाहते हैं कि लेआउट में चाहते हैं, और प्रत्येक प्रेस के लिए इस कीबोर्ड पर बटन दबाएं, संपादन टेक्स्ट/टेक्स्ट व्यू के प्रदर्शित पाठ के लिए उपयुक्त चरित्र।

उस ने कहा, उपयोगकर्ताओं को यह पसंद नहीं है। जितना ज्यादा आप कीबोर्ड से प्रत्येक डिवाइस के लिए अलग-अलग दिखते हैं, प्रत्येक उपयोगकर्ता का उपयोग अपने कीबोर्ड पर करता है, और टेक्स्ट संपादित करते समय इसे देखने की अपेक्षा करता है। मैं आपको पुनर्विचार करने का आग्रह करता हूं।

Answer 2

अद्यतन के लिए धन्यवाद। यहां बताया गया है कि मैं इसे कैसे कार्यान्वित कर रहा हूं। यह वही हो सकता है कि आप इसे कैसे कर रहे हैं। मैं उत्सुक हूं कि अब तक आप कौन सी समस्याएं चला चुके हैं।

मैंने इसे अभी तक उत्पादन में नहीं ले जाया है, फिर भी परीक्षण कर रहा है लेकिन ऐसा लगता है कि अब तक यह अच्छी तरह से काम कर रहा है। मैंने इसे बहुत कम बनाने के लिए नीचे दिए गए कोड से कुछ सत्यापन हटा दिए हैं ...

असल में कीबोर्ड आईपैड पर 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>