6

我正在开发一个包含多个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. 那可能吗？

编辑 2013 年 10 月 3 日。第三个问题出现了，这是迄今为止最严重的问题。看起来三星决定从他们的数字键盘中跳过十进制字符（“。”），至少是input[type=numer]在浏览器中获得焦点时弹出的那个。似乎所有 Galaxy S4 设备都受到了影响（我在 S4 Mini 上看到过，我无法使用很多三星设备……我看到的都是 Nexus 爱好者 :-)）。我在谷歌上找不到太多关于这个问题的信息，但我看到 Galaxy S4 用户在 2012 年抱怨过这个问题（几周前我在一台 S3 上尝试过，没问题）。

长话短说，经过仔细考虑后，我决定在 html/javascript 中实现我自己的键盘（三星太重要了，我正因为它而受到不好的评论，我认为我无法做任何事情来修复它）。我正在重写我的应用程序，我会在完成后尝试记住并讲述这个故事。

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

4

2 回答 2

1

是的。

首先，将您的活动配置为从不显示键盘（尝试 android:windowSoftInputMode = "stateAlwaysHidden"）。如果 EditText 坚持把它拉起来，你可能会遇到一些问题，但是你可以基于 TextView 制作一个 mock EditText 来解决这个问题，或者继承 EditText 并覆盖一些方法。有多个指南，例如这里：关闭/隐藏 Android 软键盘

其次，创建您自己的 UI 键盘元素，使用您想要的任何按钮以任何您想要的布局，并在此键盘上捕获按钮按下，对于每次按下，将适当的字符附加到 EditText/TextView 的显示文本。

也就是说，用户可能不喜欢它。尽管您讨厌每个设备的键盘看起来不同，但每个用户都习惯了自己的键盘，并希望在编辑文本时看到它。我敦促你重新考虑。

于 2013-07-14T10:35:28.347 回答
1

感谢更新。这是我实施它的方式。它可能与您的操作方式相似。我很好奇你到目前为止遇到了什么问题。

我还没有把它转移到生产中，所以还在测试，但到目前为止它似乎运行良好。我已经从下面的代码中删除了一些验证，以使其更短......

基本上键盘是 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>
于 2013-12-12T11:13:27.583 回答