JavaScript文字制限 - 無効な文字が一時的に表示されます

Question

JavaScriptを使用して、さまざまなテキスト入力フィールドの文字をクライアント側の検証の形式として制限し、使いやすさを向上させています。これを行うために次のコードを使用しています。

function validNumbers(caller) {
    var exp = /^[\d.]+/g;
    var str = '';
    if (caller.value.match(exp)) {
        str = caller.value.match(exp).toString();
    } else {
        str = '';
    }
    str = str.replace(/\D/g,'');
    caller.value = str;
}

onkeypress = "validnumbers（this）;"でこの関数を呼び出します。そして、ほとんどの場合、それは魅力のように機能します。問題は、私が無効な文字をフィールドに入力すると、フィールドの価値が（JavaScriptの観点から）更新されるように見えるが、次のキーにヒットするまでキャラクターが残ることです。次のキーも無効であっても、次のキーの値に視覚的に置き換えられます。望ましい効果は、無効なキーが押されている場合、無効な値が視覚的にも表示されないことです。これを達成するにはどうすればよいですか？

編集：正しい軌道に乗ったので、以下の答えを選択しました。 「！@＃$％^＆*（）_+」のようなキャラクターを防ぐために、除外されたイベントのリストにE.ShiftKeyを追加する必要がありましたが、それは私が見つける問題ではありませんでした私自身。

Answer 1

あなたの機能では、テキストフィールドに入力されて評価された後、値をクリアしています。代わりに、テキストフィールドに完全に入力されないようにする必要があります。これを達成するには、キーダウンを使用したい preventDefault() 方法：

onkeydown="function(e) { validNumbers(e); }"

function validNumbers(e) {
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) {
        e.preventDefault();
    }
}

これにより、特定の文字がブロックされます（こちらを参照してください）入力フィールドに入ることから。これはコピーや貼り付けをブロックしないため、文字列「OnPaste」全体を評価するか、同様のイベントハンドラーで「OnPaste」を防ぐ必要があることに注意してください。

これもクロスブラワーソリューションではありませんが、足を十分に濡らすはずです。これを参照してください jsfiddle ライブの例について。