2

1) 数字のみを受け入れる 2) 3 桁の後に「.」を追加する HTML テキスト ボックスを作成しようとしています。3) 6 桁の後に、別の「.」を追加します。

たとえば、数字だけを入力すると、555.323.7637 になります。

4) '555.' のように '.' の後にいる場合、バックスペースはそれを '55' に変更します。

私はグーグルで検索してきましたが、探している正確な用語がわかりません。

ありがとう！

4

7 に答える 7

1

これは煩わしいユーザー エクスペリエンスのように思えますが、それでもどうしてもという場合は、onkeyup/onkeydown/onkeypress リスナーを使用できます (onkeyup で十分な可能性があります)。

あなたがユーザーである場合、1) フォーマットを理解している、または 2) フォーマットは実際の使用には重要ではない場合、1) ユーザーにフォーマットさせるか、2) 受信後にフォーマットします。

于 2009-08-03T00:22:22.027 に答える
1

入力フィールドの仕組みをいじるのは危険な領域です。一連のイベント ハンドラーを使用してキーの押下をリッスンすることで、おそらく 95% の確率で動作させることができます。残りの 5% の時間は、ユーザーがあなたの名前をののしっています。テキスト ボックスにコピー アンド ペーストする人を考えてみましょう (9 桁なので、おそらくかなりの数でしょうか?)。通常のイベントが期待どおりに発生しないケースは他にもたくさんあると思います。

ユーザーが入力を入力した後に入力がぼやけている (つまり、フォーカスを失っている) 場合は、マスキングと書式設定を要素に適用します。再びフォーカスが当たったら、余分な句読点を取り除いて、ユーザーが数字だけを扱えるようにします。例えば：

1: user enters numbers, it will look like this:
________________
| 123456789    |
________________

2: user moves to the next input, it will change to this:
________________
| 123.456.789  |
________________

3: user comes back to the element, it changes to:
________________
| 123456789    |
________________
于 2009-08-03T00:46:30.200 に答える
0

MeioMask http://www.meiocodigo.com/をチェックしてください。これは、あなたが求めていることのほとんどを実行するJQueryプラグインです。

于 2009-08-03T00:58:53.157 に答える
0

あなたがやりたいことはおそらく、問題のテキスト フィールドの onKey___ イベントに作用する Javascript を使用して、フィールドの値を検証し、(必要に応じて) 変更することです。

バックスペース キーの動作を変更するには、おそらくフィールドの内容を考慮して onKeyDown イベントを処理する必要があります。

別の回答で示唆されている代替オプションは、単に3つの個別のテキストボックスを使用することです.Javascriptを使用して、それぞれが入力された後にカーソルを次のボックスに自動的に「ジャンプ」させることができます.これは、電話番号などのかなり標準的なソリューションです.入力。

于 2009-08-03T00:21:07.377 に答える
0

HTML :

<textarea id="messageBox"></textarea>

JavaScript (JQuery):

$(document).ready(function() {
    var num_of_digits = 0;
    var textarea = $("#messageBox");
    textarea.keydown(
        function(e){
            var key = e.charCode || e.keyCode || 0;
            if (
                (key >= 48 && key <= 57)
                || (key >= 96 && key <= 105) 
               ) { // Number pressed (top row and numpad)
                if (num_of_digits++ % 3 == 0 && num_of_digits != 1) {
                    // Insert a period into the back
                    textarea.val(textarea.val() + '.');
                }
            } else {
                // non-number pressed
                if (key == 8) { // backspace
                    var last_char = textarea.val().slice(-1);
                    if (last_char == '.') {
                        textarea.val(textarea.val().slice(0, -1));
                    }
                    num_of_digits--;
                } else if (key == 46) { // delete key
                    // delete logic in here
                } else if (key >= 37 && key <= 40) { // arrow keys
                    // pass
                } else {
                    e.preventDefault();
                }
            }
        }
    );
});

これはすぐに書かれ、テストされていないのでYMMVですが、それがあなたができる方法です。

編集：あなたが望むことをしているようです。shrug 数字以外のキーは使用できません (バックスペース、スペース、エンター、ホーム/エンドなどは使用できません)。そのために必要な場合は、質問に追加してください。回答を変更できます。

編集 2:バックスペースは、OP の質問で説明されているように機能するようになりました。削除は少しトリッキーで、OP の演習として残されています。

于 2009-08-03T00:31:43.727 に答える
0

Stack Overflow がまさにこの「Your Answer」テキスト ボックスで使用するのと同じ方法を使用できます。

ユーザーにテキスト ボックスにテキストを入力してもらい ( REGEXを使用して数字のみを検証する)、次の書式設定されたテキストをonkeypress JavaScript イベントと共に別のテキスト ボックスに読み取り専用属性で表示して、ユーザーがテキストを変更できないようにすることができます。

ありがとう

于 2009-08-03T00:36:12.510 に答える
0

以前にこれを試してみましたが、思ったほど完全に機能させることができませんでした。「キープレス」イベント (または、より良いのは「キーアップ」イベント) をキャプチャし、そのフィールド値を書き直すことは、かなり良いことでした。(これは、ほとんどの「マスキング」ライブラリが行うことであり、他のライブラリは既にサンプル コードを投稿しています。) ここで説明するのは、このアプローチで私が抱えていた問題です。

(1) カーソルキーを使用してフィールドを前後に移動する人々の問題を管理するのは困難でした。クロスプラットフォームの方法でカーソルキーをキャプチャする方法についてのメモがありますが、少し注意が必要です。

(2) 削除キーを押す操作はさらに面倒でした (特に、フィールド内の任意の場所にカーソルを移動したりクリックしたりできるため)。削除を押したときにカーソルの前の文字を削除するだけでは、ユーザー エクスペリエンスは良くありません。ユーザーが削除できない状況が発生します。「123.4」と入力し、6 回続けて削除を押したとします。最初の削除で「4」が削除され (これまでのところ良好)、次の削除で「.」が削除されます。これで、フォーマット ルールに "123" が表示され、"123" の 10 進数が追加されます。ユーザーは好きなだけ削除を押すことができ、どこにも行きません! これは、前の文字の代わりに前の重要な文字(この場合は数字)を削除することで解決しました。

(3) ペーストの取り扱いは、私たちが決して解決できなかったものでした。「ctrl-v」による貼り付けは、さまざまなプラットフォームでキャッチできるキー イベントを生成しますが、編集メニューによる貼り付けは、プラットフォーム間で一貫してキャッチできませんでした。結局、私たちはそれをあきらめました。

この経験が少しでもお役に立てれば幸いです。コードを共有したいのですが、残念ながらそれは仕事用であり、許可されていません。

于 2009-08-03T00:51:00.277 に答える