1

その入力と最新のキープレスを組み合わせた値が正規表現を渡さない場合、ユーザーが入力ボックスの文字列を変更できないようにするにはどうすればよいですか?

個々の文字をテストするために keypress を使用する方法に関するあらゆる種類の例を見てきましたが、押されたキーだけでなく、値全体を正規表現に一致させる必要があります。

たとえば、テキスト ボックスは次の正規表現に準拠する必要があります。

"^023-[0-9]{0,7}$"

したがって、に変更"023"したい場合は、キャラクター"23"を削除するときに停止する必要があります。after0を削除する場合も同様です。また、 の後に 7 つ以上の数字を入力すると、それらを停止する必要があります。これはぼかしでは実行できません。キーストロークごとに実行する必要があります。パフォーマンスは問題ではありません。-023023

jQuery で keypress() イベントを使用し、次のように入力要素の値を取得するとします。

$(this).val()

次に、キーを押す前の値のみを取得します - 後ではありません。したがって、正規表現に対して入力をテストする方法はありません。押されたキーをこの文字列に単純に追加することはできません。これは、文字列の最も右側にキーを入力しているだけであると仮定できないためです。

キーダウン/キーアップイベントを調べました.キーアップは、ユーザーがキーを押した後の入力の現在の値を提供しているようですが、入力したものの影響を取り除くのは難しいと思います...どのキープレス()見た目には問題ありません。

var regex = new RegExp("^023-[0-9]{0,7}$");

$("#number").keyup(function(event) {
    var number = $(this).val();

    if(!regex.test(number)) {
        event.preventDefault();

        return false;
    }
});

上記のコードは機能しません。keypress() を使用すると、入力した内容を停止できるように見えますが、keyup を使用すると、現在の値を取得できます。両方を行うソリューションが必要です;）

この問題は、ブラウザに MVC アーキテクチャがないことが原因です。モデルはビューです。残念ながら、ビューが更新される前に更新されたモデルを検証することはできません...更新されたモデル データを取得するには、keyup イベント中にビューを更新する必要があるためです...そして、それまでに更新を防ぐには遅すぎますすでに更新されているため、表示します。

4

5 に答える 5

2

これはどう：

var prevValue = "";
$("#number").keydown(function(e) {
   prevValue = $(this).val();
});

$("#number").keyup(function(e) {
...
   if(!regex.test(number))
      $(this).val(prevValue);
      // show error or other processing you need to do
});
于 2012-07-02T16:29:36.693 に答える
1

これを試して：

var pattern = new RegExp("^023-[0-9]{0,7}$");

$("#number").change(function(e){
if (!pattern.test($(this).val())) {
      return false
    }
})
于 2012-07-02T16:33:33.847 に答える
0

持っているeventパラメーターには、処理しているイベントのすべての詳細が含まれます。これには、押されたキーが含まれます。

注目すべきはkeydown、keyupイベントは押されたキーを返し、keypress入力された文字を返すので、選択に適している可能性があります。

詳細については、http： //api.jquery.com/keypress/のヘルプページを参照してください。

要約すると、しかしevent.whichあなたが望むことをするべきです。これをテキストボックスの元の値と組み合わせて、そこから新しい値を取得できます。有効でない場合はイベントをキャンセルし、有効な場合は手放します...

于 2012-07-02T16:30:18.467 に答える
0

jQuery Validate プラグインを使用できる場合は、正規表現に一致するカスタム バリデータを作成できます。あとは、バリデーターをその入力にマップするだけです。サーバー側で検証する必要がありますが、おそらく既に行っているでしょう。

于 2012-07-02T16:35:54.427 に答える
0

必要なことを行うには、jquery caret プラグインが必要です。ファイルの先頭からコメントを削除する (または少なくとも移動する) 必要があることに注意してください。そうしないと、コードの先頭にあるバイト オーダー マークによってエラーが発生します。

したがって、キープレスをキャプチャし、文字列の正しい場所に文字を挿入し、その新しい文字列が有効かどうかを確認してから、新しい挿入を表示するかどうかを確認する必要があります。私はあなたが必要とすることを次のようにすると思います：

$(document).ready(function(){
    var regex = new RegExp("^023-[0-9]{0,7}$");
    var caretpos;

    $('#number').keypress(function(event){
        // get the caret position
        caretpos = $(this).caret().start;
        //split the current value according to where the caret is
        valuestart = $(this).val().substring(0,caretpos);
        valueend = $(this).val().substring(caretpos);
        // insert the fired character into the string
        valuetocheck = valuestart + String.fromCharCode(event.which) + valueend;
        // check if the proposed new value passes the regex
        if (!regex.test(valuetocheck)) {
            // failed, prevent the character being shown
            event.preventDefault();
        }
    });
});

FF、Chrome、Safari、Opera、IE9 の最新バージョンでこれをテストしました。FF と Opera では、カーソル キーの押下は完全に無視されますが、他のブラウザーでは通常どおりキャレットが移動します。そのため、一貫した動作を確保するためにコードを追加することをお勧めします。ユーザーが入力をクリックするだけでなく、文字を選択した場合に何が起こるかを処理するコードを追加することもできます。jquery caret プラグインには、選択の使用例があります。

于 2012-07-03T12:08:32.867 に答える