4

重複の可能性：
jQueryプラグインを使用して構造化データ（電話、日付）を自動フォーマットする（またはそのバニラJavaScriptに失敗する）
特定の文字の後にスペースを挿入してjavascript文字列に

ソフトウェアやゲームの裏側にあるようなプロダクトキーを処理するスクリプトを作成しようとしています。

ユーザーがキーコードを入力するときに、5セットの文字に対して5文字ごとに「-」が挿入されるようにしたいと思います。Ex（ABCDE-FGHIJ-KLMNO-PQRST-UVWXY）。したがって、ユーザーが''が入力さABCDEれるとすぐに入力すると、' 'はjQueryまたはJavaScriptを介して即座に挿入されます。E-

前もって感謝します。質問がある場合、または私が不明な場合はコメントしてください:)

形：

<form method="post" action="process.php">
<p>Key: <input name="key" id="key" size="40"></p>
<p><input type="submit"></p>
</form>
4

6 に答える 6

11

http://digitalbush.com/projects/masked-input-plugin/を使用できます

jQuery(function($){
   $("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa");
});
于 2012-09-23T20:41:49.653 に答える
2

http://digitalbush.com/projects/masked-input-pluginを使用するのはどうですか

そのプラグインを使用すると、次のようになります。

jQuery(function($){
   $("#key").mask("99999-99999-99999-99999-99999",{placeholder:" "});
});

または、キーがすべて文字の場合は、次を使用します。

$("#key").mask("aaaaa-aaaaa-aaaaa-aaaaa-aaaaa",{placeholder:" "});

または、英数字を使用する場合：

$("#key").mask("*****-*****-*****-*****-*****",{placeholder:" "});
于 2012-09-23T20:46:16.297 に答える
2

HTML：

<fieldset id="productkey">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
    <input type="text" size="5" maxlength="5">
</fieldset>

JavaScript：

$( '#productkey' ).on( 'keyup', 'input', function () {
    if ( this.value.length === 5 ) {
        $( this ).next().focus();            
    }
});

ライブデモ： http： //jsfiddle.net/XXLND/3/show/

コードを拡張して、最後のテキストボックスに入力すると、処理メカニズムがアクティブになるようにすることもできます。

$( '#productkey' ).on( 'keyup', 'input', function () {
    var $field = $( this );

    if ( $field.val().length === 5 ) {
        if ( $field.is( ':last-of-type' ) ) {
            $field.blur();
            processKey();              
        } else {
            $field.next().focus();            
        }
    }
});

ライブデモ： http： //jsfiddle.net/XXLND/4/show/

于 2012-09-23T20:54:40.080 に答える
2

JQueryが好きではないという理由だけで:)

function insertSpace(string, part, maxParts) {
    "use strict";
    var buffer = string.split("-"), step, i;
    for (i = 0; i < buffer.length; i += 1) {
        step = buffer[i];
        if (step.length > part) {
            buffer[i] = step.substr(0, part);
            buffer[i + 1] = step.substr(part) + (buffer[i + 1] || "");
        } else if (step.length < part) {
            if (i == buffer.length - 1) {
                if (!step) {
                    buffer.pop();
                }
            } else {
                buffer[i + 1] = step + (buffer[i + 1] || "");
                buffer.splice(i, 1);
                i -= 1;
            }
        }
    }
    buffer.length = Math.min(maxParts, buffer.length);
    return buffer.join("-");
}
于 2012-09-23T21:21:32.257 に答える
1

これが1つのアプローチです：

// binds to both the 'keyup' and 'paste' events
$('input:text').on('keyup paste', function(e) {
    var that = $(this), // caches the $(this)
        val = that.val(), // access the value of the current input
        key = e.which, // determines which key was pressed
        allowed = [8, 46, 9, 16]; // defines 'allowed' keys (for editing/focusing)
                                  // backspace, delete, tab, shift
        if ($.inArray(key, allowed) == -1) {
            // if the pressed key is *not* an 'allowed' key
            if (val.length == 5) {
                // focuses the next element
                that.next().focus();
            }
            else if (val.length > 5) {
                // truncates the string, if greater than 5 characters
                that.val(val.substring(0, 5));
                that.next().focus();
            }
        }
});​

JSフィドルデモ。

このアプローチの利点は、入力された文字列をマスクまたは操作したり、複数のエッジケースを考慮したりするのではなく、フォーカスを適切な位置に移動することでユーザーを支援するだけであるということです。また、この場合、ユーザーは以前に入力したデータを再編集することに再び焦点を合わせることができます。

于 2012-09-23T20:56:59.570 に答える
0

2つのこと：

ユーザーエクスペリエンスの側面の1つとして、ユーザーがコードを入力するときに入力フィールドに文字を動的に追加することは避けたいと思います。環境によっては、ユーザーの入力内容に干渉するリスクがあります。ただし、「-」はユーザーの参照ポイントであるため、ユーザーがコードを入力するのに役立ちます。したがって、入力フィールドを用意し、その横にきれいなバージョンのコードを表示することをお勧めします（または、フィールドを非表示にして、フィールドのフォーカスを自分で管理します）。

phpコードの場合、5文字ごとに文字を追加する代わりに、反対のことを行い、不要な文字をすべて削除してコードを簡略化します。そんな感じ

if ( str_replace('-', '', $userInputKey)==str_replace('-', '', $officialKey) {
 echo 'Yeah! Valid key!';
}
于 2012-09-23T20:49:18.940 に答える