2014-01-19 19 views
8

私は簡単なWebアプリケーションを作っています。それの一部で、私は私が私の最新のGoogle Chromeブラウザでコードを実行すると、私はあまりにもテキストを入力することができる午前、とにかく種類の入力ボックス=「数」<input type = "number">のテキスト入力を無効にする>

<input type="number" min="0"> 

が含まれている:

I entered text in an input type of number

私はユーザーがそれを行うことを望んでいません。これをどうやって修正すべきですか?

+0

が入力をキャッチします何かを削除するにはJavaScriptを追加数字ではありません。 –

+0

@MarcBどうすればいいですか? – coder

+0

これを試してください、http://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox –

答えて

15

あなただけの特定の文字を許可するように(例えば、jQueryを使って)JavaScriptを使用することができます。

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^0-9]/g, ''); 
    // Update value 
    $(this).val(sanitized); 
}); 

Hereはフィドルです。フロートをサポートする

同じこと:

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^0-9.]/g, ''); 
    // Remove the first point if there is more than one 
    sanitized = sanitized.replace(/\.(?=.*\.)/, ''); 
    // Update value 
    $(this).val(sanitized); 
}); 

そしてhereは別のフィドルです。

更新:これが必要ではないかもしれませんが、ここでは、マイナス記号の先頭にできる解決策があります。

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^-0-9]/g, ''); 
    // Remove non-leading minus signs 
    sanitized = sanitized.replace(/(.)-+/g, '$1'); 
    // Update value 
    $(this).val(sanitized); 
}); 

3rd fiddle

そして(山車と負の数を含む)のみ有効小数可能になりました最終的な解決策:あなたが制限するHTML5 input type numberを使用することができます

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^-.0-9]/g, ''); 
    // Remove non-leading minus signs 
    sanitized = sanitized.replace(/(.)-+/g, '$1'); 
    // Remove the first point if there is more than one 
    sanitized = sanitized.replace(/\.(?=.*\.)/g, ''); 
    // Update value 
    $(this).val(sanitized); 
}); 

Final fiddle

+2

番号にdeciamlポイントがある場合は '.''と..?これは役に立ちません... –

+1

@Mike Answer –

+0

入力にも文字があるので、$(this).val()は ''となります。 –

4

を番号エントリのみ:

<input type="number" name="someid" /> 

これはHTML5のクレームブラウザでのみ動作します。

<!DOCTYPE html> 

一般的な目的のために、あなたは以下のようにJSの検証を持つことができます:HTMLドキュメントのDOCTYPEがあることを確認し

function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
     return false; 
    return true; 
} 

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/> 

あなたは小数はこれで「状態ならば」を置き換えるようにしたい場合は、次の

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57))) 

出典:HTML Text Input allow only Numeric input

+0

私はあなたのソリューションが好きですが、小数点の検証は正しくありません。 '1.2.3.4'は明らかに有効な小数ではありません。ところで、コードスニペットは、 'CTRL + A'や' CTRL + C'などのキーボードショートカットが機能しないようにします。 –

+0

@still_learning 'CTRL + A'と' CTRL + C'はうまく働いていますが、 '1.2.3.4'は有効な小数ではありません。正しいですが、私はこのコードを有効な10進数に書いていないと思います。 ..要件が異なります.... –

関連する問題