0

これを使用したいすべての入力フィールドに書き込み関数を持たないようにしようとしています。むしろ、要素IDを関数に送信し、リサイクルできる関数を1つだけ持つ.

このように動作します

    <input name="field" id="field" type="text" onKeyPress="onlyNum()" />

    <script type="text/javascript"> 
        function onlyNum() {
            var name = $("#field");
            name.keypress(function (e) {
                if (e.which > 0 && // check that key code exists
                    e.which != 8 && // allow backspace
                    !(e.which >= 48 && e.which <= 57) // allow 0-9
                    ) {
                    e.preventDefault();
                }
            });
        }
    </script>

しかし、それはこのようには機能しませんが、これは私がしようとしていることです:

    <input name="field" id="field" type="text" onKeyPress="onlyNum('field')" />

    <script type="text/javascript"> 
        function onlyNum(theInput) {
            var name = document.getElementById(theInput);
            name.keypress(function (e) {
                if (e.which > 0 && // check that key code exists
                    e.which != 8 && // allow backspace
                    !(e.which >= 48 && e.which <= 57) // allow 0-9
                    ) {
                    e.preventDefault();
                }
            });
        }
    </script>

では、2 番目の例の何が問題なのか、誰にもわかりませんか? そして、どうすればそれを機能させることができますか。ありがとう

4

1 に答える 1

2

.keypress2 番目の例の問題は、DOM 要素を呼び出そうとしていることです。ただし、 jQueryオブジェクト.keypressのメソッドです。

ただし、全体のアプローチは奇妙です。あなたがしようとしているのは、キーを押すたびに新しいイベントハンドラーを要素にバインドすることです。つまり、3 つのキーが押された後、同じ要素に 3 つのイベント ハンドラーが割り当てられ、それらはすべて同じことを行います。

あなたがすべきことは、イベントハンドラーをバインドする各要素にクラスを割り当て、jQuery でそれらを選択し、ハンドラーを一度バインドすることです。

例えば：

<input name="field" id="field" type="text" class="someClass"/>

ハンドラーのバインド:

// will bind the event handler to each 'input' field with class 'someClass'
$('input.someClass').keypress(function (e) {
    if (e.which > 0 && // check that key code exists
        e.which != 8 && // allow backspace
        !(e.which >= 48 && e.which <= 57) // allow 0-9
    ) {
        e.preventDefault();
    }
});

HTML を変更できない場合は、複数セレクターを使用して ID をリストします。

// adds the event handler to the elements with the IDs 'field', 'someID' and
// 'someOtherID'
$('#field, #someID, #someOtherID').keypress(function() {
    //...
});

それがjQueryの仕組みです。より良いアイデアを得るために、いくつかのチュートリアルを読むことをお勧めします。

コードを修正するためのあまり推奨されない方法を次に示します。

keypressイベント ハンドラー内のイベントにハンドラーをバインドしていると既に述べましたがkeypress、これは意味がありません。onkeypressHTML 属性を介してイベント ハンドラーを既に割り当てています。要素の ID は必要ありません。eventオブジェクトを関数に渡すだけです。

例：

<input name="field" id="field" type="text" onKeyPress="onlyNum(event)" />

JavaScript:

function onlyNum(e) {
    if (e.which > 0 && // check that key code exists
        e.which != 8 && // allow backspace
        !(e.which >= 48 && e.which <= 57) // allow 0-9
    ) {
        e.preventDefault();
    }
}

このアプローチとの最大の違いはevent、jQuery イベント オブジェクトではなく、ネイティブ イベント オブジェクトであることです。e.preventDefault()これは、このメソッドが存在しないため、IE8 以下では呼び出しが失敗することも意味します。e.keyCodeの代わりに使用する必要がある場合もありますe.which。jQuery は、これらすべての違いを処理します。

于 2012-08-11T09:09:16.530 に答える