6

input[type=numer]複数の要素を持つアプリを開発しています。今のところAndroidのみ。

内蔵のテンキーには2つの問題があります。

 * 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日編集。3番目の問題が発生し、それははるかに最悪です。Samsungは、数字キーボードから10進文字（ "。"）をスキップすることを決定したようです。少なくとも、input[type=numer]ブラウザでフォーカスを取得したときにポップするものです。すべてのGalaxyS4デバイスが影響を受けているようです（S4 Miniで見たことがありますが、Samsungデバイスの多くにアクセスできません...私が見ているのはNexus愛好家だけです:-)）。Googleでこの問題について多くを見つけることはできませんでしたが、Galaxy S4ユーザーが2012年にこの問題について不満を言っているのを見ました（数週間前に1つのS3で試しましたが、問題ありませんでした）。

簡単に言えば、慎重に検討した結果、自分のキーボードをhtml / javascriptに実装することにしました（Samsungは重要すぎます。それだけで悪いレビューが寄せられており、修正するために何もできないと思います）。私はアプリを書き直している最中です。終わったら、覚えて話をしようと思います。

2013年12月3日編集。私の現在の解決策（まだアルファ段階ですが、アプリの書き換えには予想よりもはるかに時間がかかります）は、完全にjavascriptで実装されたキーボードです。OSキーボードが飛び出さないように、<input>の代わりに通常の<span>要素を使用しました。追加の利点として、キーボードに関するすべてを制御できるので、いくつかの算術キー（x、-、*、/、（および））を追加し、ユーザーは「3x（2 +5.5」などの式を入力できます。 ）」の代わりに「15」。準備ができたらアプリにリンクします（少なくともあと数週間）。

4

2 に答える 2

1

更新していただきありがとうございます。これが私がそれを実装している方法です。あなたのやり方と似ているかもしれません。これまでにどのような問題に遭遇したのか知りたいです。

これをまだ本番環境に移行していないため、まだテスト中ですが、これまでのところうまく機能しているようです。以下のコードからいくつかの検証を削除して、コードをより短くしました...

基本的にキーボードは iPad では 1 行、電話では 2 行です。クラス "keyboard" を持つすべての入力フィールドをサポートし、".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 に答える
1

もちろんそうだ。

まず、キーボードを表示しないようにアクティビティを構成します (android:windowSoftInputMode = "stateAlwaysHidden" を試してください)。EditText がプルアップを主張する場合、いくつかの問題が発生する可能性がありますが、TextView に基づいてモック EditText を作成してそれを回避するか、EditText を継承していくつかのメソッドをオーバーライドすることができます。ここのように、それに関する複数のガイドがあります：Androidソフトキーボードを閉じる/隠す

次に、独自の UI キーボード要素を作成し、任意のボタンを任意のレイアウトで配置し、このキーボードでボタンを押すたびに、EditText/TextView の表示テキストに適切な文字を追加します。

とはいえ、ユーザーは気に入らないかもしれません。キーボードがデバイスごとに異なって見えることを嫌いますが、各ユーザーは自分のキーボードに慣れており、テキストを編集するときにそれが表示されることを期待しています。再考を促します。

于 2013-07-14T10:35:28.347 に答える