ユーザーが小数を入力しないようにするにはどうすればよいですか？

Question

私のサイトに注文ページがあります。いくつかの注文アイテムは小数点を持つことができますが、一部の商品はできません。

ユーザーが小数点以下の桁数を入力しないようにするにはどうすればよいですか？ （アラートボックスとフィールドをゼロに設定することは別として）？

Answer 1

フィールドのキーイベントを傍受し、入力時に不正な文字を検出し、フィールドに入力されないようにし、許可されている文字または値を説明するフィールドの近くに一時的なmsgを追加します。ポップアップアラートは、入力の途中でフィードバックを与えるのに悪い方法です。

次に、データをフィールドにドラッグ＆ドロップ、コピー/ペーストなどのデータを取得する方法があるため、すべてをキャッチしていない可能性があるため、もう一度検証してください。

ここでは無効なキーが入力されたときに、一時的なメッセージを持つ唯一の整数および小数フィールドのみ、両方のjQueryの例が表示されます：

ワーキングjsFiddle：http://jsfiddle.net/jfriend00/CkDTy/

$(".integer").keypress(function(e) { 
    if (e.which < 48 || e.which > 57) { 
     showAdvice(this, "Integer values only"); 
     return(false); 
    } 
}); 

$(".decimal").keypress(function(e) { 
    // 46 is a period 
    if (e.which != 46 && (e.which < 48 || e.which > 57)) { 
     showAdvice(this, "Decimal numbers only"); 
     return(false); 
    } 
    if (e.which == 46 && this.value.indexOf(".") != -1) { 
     showAdvice(this, "Only one period allowed in decimal numbers"); 
     return(false); // only one decimal allowed 
    } 
}); 

function showAdvice(obj, msg) { 
    $("#singleAdvice").stop(true, false).remove(); 
    $('<span id="singleAdvice" class="advice">' + msg + '</span>').insertAfter(obj); 
    $("#singleAdvice").delay(4000).fadeOut(1500); 
} 

Answer 2

ここで非防ぎ少しjQueryのです - 数値入力：

$(function() { 
    $('input').bind('keyup', function(event) { 
     var currValue = $(this).val(); 

     if(currValue.search(/[^0-9]/) != -1) 
     { 
      // Change this to something less obnoxious 
      alert('Only numerical inputs please'); 
     } 

     $(this).val(currValue.replace(/[^0-9]/, '')); 
    }); 
}); 

Answer 3

イベントを追加して（キーを押すと）、小数点が押されたかどうかを検出できますserかどうか。また、フォーム提出時には、正規表現を使用して、送信されたデータが正しいかどうかを確認します（ユーザーがfirebugのようなライブエディタを使用してデータを偽造できるため）。また、ユーザーがjavascriptを無効にしている場合に備えて、サーバー側で確認してください。例えば

：

<input type="text" onkeypress="checkDecimal();" /> 
<input type="submit" onclick="checkBeforeSubmit();" /> 

function checkDecimal() { 
    // your code goes here 
} 

function checkBeforeSubmit() { 
    // your code goes here 
} 

あなたは、より良い、それは基本的には同じことだ原因同じ機能を使用して、両方のイベントから、それを起動します。

サーバー側では、送信されたデータを再度チェックしてください。