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的键盘。 那可能吗？

编辑2013年10月3日 。 出现了第三个问题，这是最严重的问题。 三星似乎决定从其数字键盘上跳过小数点（“。”），至少当input[type=numer]成为浏览器焦点时弹出的小数点。 似乎所有Galaxy S4设备都受到影响（我已经在S4 Mini上看到过，我无法使用许多三星设备...我所看到的都是Nexus爱好者：-）。 我在Google上找不到太多有关此问题的信息，但我看到Galaxy S4用户在2012年对此有所抱怨（几周前我曾在一台S3上进行过尝试，还可以）。

长话短说，经过慎重考虑，我决定在html / javascript中实现自己的键盘（三星太重要了，仅仅因为它而我获得了不好的评价，我认为我无能为力。） 我正在重写我的应用程序，我会尽力记住并讲完故事。

编辑2013年12月3日 。 我目前的解决方案（仍处于Alpha阶段，应用程序重写花了我比预期更长的时间）是完全用javascript实现的键盘。 我使用常规的<span>元素而不是<input>来防止OS键盘弹出。 另外一个好处是，我可以控制键盘的所有内容，因此添加了一些算术键（x，-，*，/，（和）），用户可以键入表达式，例如“ 3x（2 + 5.5） ）”，而不是“ 15”。 准备就绪时，我将链接到该应用程序（至少还有几周）。

Answer 1

当然是啦。

首先，将您的活动配置为从不显示键盘（尝试android：windowSoftInputMode =“ stateAlwaysHidden”）。 如果EditText坚持将其提起，则可能会遇到一些问题，但是您可以基于TextView创建一个模拟EditText来解决该问题，或者继承EditText并重写某些方法。 上面有多个指南，例如： 关闭/隐藏Android软键盘

其次，创建您自己的UI-keyboard元素，使用所需的任何按钮（无论布局如何），并在此键盘上捕捉按钮的按下，对于每次按下，将适当的字符附加到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>