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爱好者:-)）。我在谷歌找不到这个问题，但我看到Galaxy S4的用户在2012年抱怨它（几周前我在一台S3上尝试过它就没事了。）

长话短说，仔细考虑之后，我决定用html / javascript实现我自己的键盘（三星太重要了，因为它我得到了不好的评论，我认为我不能做任何事情来解决它）。我正在重写我的应用程序，我会尽力记住并在完成后讲述故事。

2013年12月3日编辑。我目前的解决方案（仍处于alpha阶段，应用程序重写比我想象的要长）是一个完全用javascript实现的键盘。我经常使用＆lt; span＆gt;元素而不是＆lt; input＆gt;防止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>

PhoneGap / Android自定义键盘

2 个答案: