注：これは更新された回答です。以下のコメントは、キーコードを台無しにした古いバージョンに関するものです。
JavaScript
以下のsetInputFilter関数を使用すると、さまざまな数値フィルターを含むテキスト<input>でany種類の入力フィルターを使用できます（以下）。
他のほとんどのソリューションとは異なり、このは正しくサポートしていますコピー+貼り付け、ドラッグ+ドロップ、すべてのキーボードショートカット、すべてのコンテキストメニュー操作、すべての入力不可能なキー（例：カーソルとナビゲーションキー）、キャレットの位置、すべての言語とプラットフォームのすべてのキーボードレイアウト、および IE 9以降のすべてのブラウザー 。
自分で試してみてください JSFiddleで 。
// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
});
});
}
// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value);
});
使用したい入力フィルター：
- 整数値（正のみ）：
/^\d*$/.test(value) - Integer値（正の値および特定の制限まで）：
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500) - 整数値（正と負の両方）：
/^-?\d*$/.test(value) - 浮動小数点値（小数点記号として
.と,の両方を許可）：/^-?\d*[.,]?\d*$/.test(value) - 通貨値（つまり、小数点以下2桁まで）：
/^-?\d*[.,]?\d{0,2}$/.test(value) - A-Zのみ（つまり、基本的なラテン文字）：
/^[a-z]*$/i.test(value) - ラテン文字のみ（つまり、英語およびほとんどのヨーロッパ言語、Unicodeの詳細については https://unicode-table.com を参照してください）文字範囲）：
/^[a-z\u00c0-\u024f]*$/i.test(value) - 16進数値：
/^[0-9a-f]*$/i.test(value)
あなたはまだmustサーバー側の検証を行うことに注意してください！
jQuery
このjQueryバージョンもあります。 この回答 を参照するか、自分で試してみてください JSFiddleで 。
HTML 5
HTML 5には<input type="number">（ specification を参照）を使用したネイティブソリューションがありますが、ブラウザーのサポートが異なることに注意してください。
- ほとんどのブラウザは、フォームの送信時にのみ入力を検証し、入力時には検証しません。
- ほとんどのモバイルブラウザ
step、min、およびmax属性をサポートしていません。 - Chrome（バージョン71.0.3578.98）では、ユーザーはフィールドに
eおよびEの文字を入力できます。 この質問 も参照してください。 - Firefox（バージョン64.0）およびEdge（EdgeHTMLバージョン17.17134）では、ユーザーがanyテキストをフィールドに入力できます。
自分で試してみてください w3schools.comで 。
このDOMを使う
<input type='text' onkeypress='validate(event)' />
そしてこのスクリプト
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
私はこれに対する良い答えを長くそして一生懸命探しました、そして、我々は必然的に<input type="number"を必要とします、しかしそれにもかかわらず、これらの2つは私が思い付くことができる最も簡潔な方法です：
<input type="text"
onkeyup="this.value=this.value.replace(/[^\d]/,'')">
あなたが消去される前に一瞬の間表示されている受け入れられない文字が嫌いなら、以下の方法が私の解決策です。数多くの追加条件に注意してください。これはあらゆる種類のナビゲーションとホットキーを無効にするのを避けるためです。誰もがこれをコンパクトにする方法を知っているなら、私たちに知らせてください！
<input type="text"
onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )">
もう1つ例を挙げましょう。
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
キー押下イベントにも添付
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
そしてHTML：
<input type="input" id="edit1" value="0" size="5" maxlength="5" />
HTML5には<input type=number>があります。現時点では、Operaのみがネイティブにサポートしていますが、 プロジェクト にJavaScript実装があります。
これは10進数を1つだけ許可する単純なものですが、それ以上はありません。
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />ここでのほとんどの答えはすべてキーイベントを使うことの弱点を持っています 。
回答の多くは、キーボードマクロによるテキスト選択、コピー+貼り付けなどの望ましくない動作を制限するものです。他のものは特定のjQueryプラグインに依存しているように見えます。
この単純な解決策は、入力メカニズム（キーストローク、コピー+貼り付け、右クリックコピー+貼り付け、音声合成など）に関係なく、クロスプラットフォームでは最適に機能するようです。すべてのテキスト選択キーボードマクロはまだ機能し、スクリプトによって数値以外の値を設定する機能も制限されます。
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
私はここで述べた二つの答えの組み合わせを使うことを選んだ。
<input type="number" />
そして
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="text" onkeypress="return isNumberKey(event);">
HTML5は正規表現をサポートしているので、これを使うことができます。
<input id="numbersOnly" pattern="[0-9.]+" type="text">
警告：ブラウザによってはまだこれをサポートしていません。
JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
さらに、コンマ、ピリオド、マイナス（、.-）を追加できます
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
2つの解決策：
フォームバリデータを使う（例えば jQuery検証プラグイン と共に）
正規表現を使用して、入力フィールドのonblur（つまり、ユーザーがフィールドを離れる）イベント中にチェックを行います。
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>
とても簡単....
// JavaScript関数内（HTMLまたはPHPを使用可能）。
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
あなたのフォーム入力で：
<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>
最大入力あり（上記の12桁の数字が可能です）
下記の解決策を見つけてください。このユーザではnumeric値のみを入力することができます。また、ユーザは入力でcopy、paste、dragおよびdropを入力することはできません。
使用できる文字
0,1,2,3,4,5,6,7,8,9
禁止されているキャラクターやキャラクター、イベントを通じて
- アルファベット値
- 特殊文字
- コピー
- 貼り付け
- ドラッグ
- ドロップ
$(document).ready(function() {
$('#number').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">うまくいかないか教えてください。
より安全な方法は、キープレスをハイジャックしてkeyCodeをフィルタリングしようとする代わりに、入力値をチェックすることです。
この方法では、ユーザーはキーボードの矢印、修飾キー、バックスペース、削除、標準以外のキーボードの使用、マウスによる貼り付け、テキストのドラッグアンドドロップ、さらにはユーザー補助入力を使用することができます。
以下のスクリプトは正数と負数を許可します
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed
var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;
//enforce that only a float can be inputed
function enforceFloat() {
var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
if (!valid.test(this.value)) {
var n = this.value.match(number);
this.value = n ? n[0] : '';
}
}<input id="number" value="-3.1415" placeholder="Type a number" autofocus>編集：私はそれが今時代遅れだと思うので私は私の古い答えを削除しました。
これにはpatternを使うことができます。
<input id="numbers" pattern="[0-9.]+" type="number">
英数字の間でデバイス（携帯電話など）に提案したい場合は、<input type="number">を使用できます。
JavaScriptコード
function validate(evt)
{
if(evt.keyCode!=8)
{
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key))
{
theEvent.returnValue = false;
if (theEvent.preventDefault)
theEvent.preventDefault();
}
}
}
HTMLコード
<input type='text' name='price' value='0' onkeypress='validate(event)'/>
バックスペースキーコードは8であり、正規表現では許可されていないため、完全に動作します。したがって、バグを回避する簡単な方法です。
Event.keyCodeやevent.whichを見るのではなく、jQueryとreplace（）を使った短くて素朴な実装です。
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
入力された文字が一時的に表示され、CTRL/CMD + Aが少しおかしいように見えるという小さな副作用だけがあります。
input type="number"はHTML5の属性です。
それ以外の場合は、これが役立ちます。
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
JQueryを使った他の変種
$(".numeric").keypress(function() {
return (/\d/.test(String.fromCharCode(event.which) ))
});
もう1つの例では、can入力フィールドに数字だけを追加し、できない letters
<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
<input name="amount" type="text" value="Only number in here"/>
<script>
$('input[name=amount]').keyup(function(){
$(this).val($(this).val().replace(/[^\d]/,''));
});
</script>
次のように、入力値（デフォルトでは文字列として扱われる）とそれ自体が数値として強制される値を比較することもできます。
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
しかし、それをキーアップなどのイベントにバインドする必要があります。
type = "number" を使用するだけでほとんどのブラウザでこの属性をサポート
<input type="number" maxlength="3" ng-bind="first">
このDOMを使用してください。
<input type = "text" onkeydown = "validate(event)"/>
そしてこのスクリプト：
validate = function(evt)
{
if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
...またはこのスクリプトで、indexOfなしで、2つのforを使用.
validate = function(evt)
{
var CharValidate = new Array("08", "046", "039", "948", "235");
var number_pressed = false;
for (i = 0; i < 5; i++)
{
for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
{
if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
{
number_pressed = true;
}
}
}
if (number_pressed == false)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
Onkeydown属性はonkeypress属性の前にチェックされるため、onkeypress属性の代わりにonkeydown属性を使用しました。問題はGoogle Chromeブラウザにあります。
属性 "onkeypress"を指定すると、Google ChromeではTABは "preventDefault"を指定して制御できなくなりますが、属性 "onkeydown"を指定するとTABは制御可能になります。
TABのASCIIコード=> 9
最初のスクリプトは2番目のスクリプトよりもコードが少なくなりますが、ASCII文字の配列にはすべてのキーが必要です。
2番目のスクリプトは最初のスクリプトよりもはるかに大きいですが、配列にすべてのキーが必要というわけではありません。配列の各位置の最初の桁は、各位置が読み取られる回数です。読み取りごとに、次のものに1ずつ増加します。例えば：
NCount = 0
48 + NCount = 48
NCount + +
48 + NCount = 49
NCount + +
...
48 + NCount = 57
数字キーの場合、10（0 - 9）しかありませんが、それらが100万の場合、これらすべてのキーで配列を作成するのは意味がありません。
ASCIIコード
- 8 ==>（バックスペース）;
- 46 =>（削除）。
- ３７ ＝（左矢印）。
- 39 =>（右矢印）。
- 48 - 57 =>（数）;
- 36 =>（家）;
- ３５ ＝＞（終了）。
これは改良された機能です。
function validateNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
最良の方法（すべてのタイプの数値を許可する-負の実数、正の実数、負の整数、正の整数）：
$(input).keypress(function (evt){
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
var objRegex = /^-?\d*[\.]?\d*$/;
var val = $(evt.target).val();
if(!regex.test(key) || !objRegex.test(val+key) ||
!theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
};
});
これは geowa4のソリューション の拡張版です。 minおよびmax属性をサポートします。数値が範囲外の場合は、前の値が表示されます。
使用法：<input type=text class='number' maxlength=3 min=1 max=500>
function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
}
$(document).ready(function(){
$("input[type=text]").filter(".number,.NUMBER").on({
"focus":function(e){
$(e.target).data('oldValue',$(e.target).val());
},
"keypress":function(e){
e.target.oldvalue = e.target.value;
number(e);
},
"change":function(e){
var t = e.target;
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val(),10);
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
}
});
});
入力が動的な場合はこれを使います。
$(document).ready(function(){
$("body").on("focus","input[type=text].number,.NUMBER",function(e){
$(e.target).data('oldValue',$(e.target).val());
});
$("body").on("keypress","input[type=text].number,.NUMBER",function(e){
e.target.oldvalue = e.target.value;
number(e);
});
$("body").on("change","input[type=text].number,.NUMBER",function(e){
var t = e.target
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val());
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
});
});
もしあなたがプラグインを使っても大丈夫なら、これが私がテストしたものです。貼り付け以外はうまくいきます。
これはデモです http://jsfiddle.net/152sumxu/2
以下のコード（Libをインラインで貼り付け）
<div id="plugInDemo" class="vMarginLarge">
<h4>Demo of the plug-in </h4>
<div id="demoFields" class="marginSmall">
<div class="vMarginSmall">
<div>Any Number</div>
<div>
<input type="text" id="anyNumber" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
(function(b) {
var c = { allowFloat: false, allowNegative: false};
b.fn.numericInput = function(e) {
var f = b.extend({}, c, e);
var d = f.allowFloat;
var g = f.allowNegative;
this.keypress(function(j) {
var i = j.which;
var h = b(this).val();
if (i>0 && (i<48 || i>57)) {
if (d == true && i == 46) {
if (g == true && a(this) == 0 && h.charAt(0) == "-") {
return false
}
if (h.match(/[.]/)) {
return false
}
}
else {
if (g == true && i == 45) {
if (h.charAt(0) == "-") {
return false
}
if (a(this) != 0) {
return false
}
}
else {
if (i == 8) {
return true
}
else {
return false
}
}
}
}
else {
if (i>0 && (i >= 48 && i <= 57)) {
if (g == true && h.charAt(0) == "-" && a(this) == 0) {
return false
}
}
}
});
return this
};
function a(d) {
if (d.selectionStart) {
return d.selectionStart
}
else {
if (document.selection) {
d.focus();
var f = document.selection.createRange();
if (f == null) {
return 0
}
var e = d.createTextRange(), g = e.duplicate();
e.moveToBookmark(f.getBookmark());
g.setEndPoint("EndToStart", e);
return g.text.length
}
}
return 0
}
}(jQuery));
$(function() {
$("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
});
</script>
この問題を解決する簡単な方法は、テキストボックスに入力した文字を正規表現で検証するjQuery関数を実装することです。
あなたのHTMLコード：
<input class="integerInput" type="text">
そしてjQueryを使ったjs関数
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<input type="text" class="integerInput"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>
<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>
これに対する別の（単純な）回避策があるかもしれません….
String.fromCharCode（key）はAZERTYキーボードで奇妙なことを返すので（数字キーパッドは1の場合はg、＆文字の場合は1としてコードを返す）。
任意の値にリセットするために入力の中でkeyupの最終的な値を捉えることは、より簡単で、軽量で、そしてバグのない方法であることに気づいた。他のCtrl、Home、Del、およびEnterイベントをフィルタする必要があります。
Jqを使った使い方：
<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>
Onkeyup属性：
<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>
つかいます：
<script>
function onlyNumber(id){
var DataVal = document.getElementById(id).value;
document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
}
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">
キーを押した後に値を更新したい場合は、 onChange を onKeypress 、 onKeyDown または onKeyup に変更できます。 しかしイベントonKeypressはどのブラウザでも動作していません。
これは簡単な解決策です
.price-input input.quantityをあなたの入力フィールドのクラスに置き換えます
$(".price-input input.quantity").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
これが私が使うのが好きな素敵な簡単な解決策です：
function numeric_only (event, input) {
if ((event.which < 32) || (event.which > 126)) return true;
return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;
<input type="text" onkeypress="return numeric_only (event, this);" />
説明：
"event.which"を使う - まずそれが印刷可能な文字かどうかを判断する。そうでない場合はそれを許可します（削除やバックスペースなどのために）。それ以外の場合は、文字を文字列の末尾に連結し、jQueryの「isNumeric」関数を使用してテストします。これにより、個々のキャラクターのテストからすべての面倒な作業を省き、カット/ペーストのシナリオにも役立ちます。
あなたが本当に可愛くなりたいなら、あなたは新しいHTML入力タイプを作成することができます。タグを持つことができるように、それを "numeric"と呼びましょう。
<input type="numeric" />
数字のみが許可されます。次の "document.ready"コマンドを追加するだけです。
$(document).ready (function () {
$("input[type=numeric]").keypress (function (event) {
if ((event.which < 32) || (event.which > 126)) return true;
return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
});// numeric.keypress;
});// document.ready;
HTMLは、あなたがどんなタイプ名を使うかを気にしません - それがそれを認識しないなら、それはデフォルトでテキストボックスを使うでしょう、それであなたはこれをすることができます。あなたの編集者は文句を言うかもしれませんが、ちょっと、それがその問題です。間違いなく、ピューリタンがおかしくなるでしょう、しかしそれはうまくいきます、簡単で、そして今のところそれは私にとってかなり頑強でした。
キーダウンイベントにアタッチしてから、必要なものに応じてキーをフィルタ処理できます。
<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);" type="text">
そして実際のJavaScriptハンドラは次のようになります。
function validateNUM(e,field)
{
var key = getKeyEvent(e)
if (specialKey(key)) return true;
if ((key >= 48 && key <= 57) || (key == 46)){
if (key != 46)
return true;
else{
if (field.value.search(/\./) == -1 && field.value.length > 0)
return true;
else
return false;
}
}
function getKeyEvent(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
keynum = e.keyCode
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which
return keynum;
}
入力フィールドにクラス（<input class="digit" ...>）を付けて、以下のようにjqueryを使います。
jQuery(document).ready(function () {
jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});
上記のコードはCtrl+Vストロークとright clickストロークの特殊文字も無効にするように働きます。
地域の違い（ユーロはアメリカ人とは逆の意味でピリオドとカンマを使用）、マイナス記号（またはマイナス記号を示すために括弧で数字を囲むという慣例）、および指数表記（私はそれに近づいています）を覚えておいてください。
Shurok関数を次のものに置き換えることができます。
$(".numeric").keypress(function() {
return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});
より良いユーザーエクスペリエンスのための私の解決策：
HTML
<input type="tel">
jQuery
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9','.']
return keys.indexOf(event.key) > -1
})
詳細：
まず最初に、入力タイプ：
numberは実際の入力スペースを縮小する上向き/下向きの矢印を表示します。それらが醜いので数字が数量を表す場合にのみ役に立ちます（電話、市外局番、IDなどは必要ありません） tel矢印なしで同様のブラウザによる数の検証を行う
[number/tel]を使用すると、モバイルデバイスで数字キーボードを表示するのにも役立ちます。
JSの検証では、通常のユーザー入力（キーを押す）とコピーと貼り付けを修正する（変更）の2つの機能が必要になりましたが、他の組み合わせではユーザーエクスペリエンスがひどくなります。
現在は非推奨の代わりにより信頼性が高いKeyboardEvent.key を使用しています。_ KeyboardEvent.charCode
そしてあなたのブラウザのサポート次第であなたは Array.prototype.indexOf（） の代わりに Array.prototype.includes（） の使用を検討することができます - （true/falseの結果に対して）
以下のコードは _ paste _ / eventもチェックします。
" ruleSetArr_4 "のコメントを外し、 " ruleSetArr "に/（ - ）を追加して _ float _ numberを許可します。
簡単なコピー/貼り付け機能。あなたのinput要素をパラメータにしてそれを呼び出します。
例：inputIntTypeOnly($('input[name="inputName"]'))
function inputIntTypeOnly(Elm){
Elm.on("keydown",function(event){
var e = event || window.event,
key = e.keyCode || e.which,
ruleSetArr_1 = [8,9,46], // backspace,tab,delete
ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys
ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
ruleSetArr_4 = [17,67,86], // Ctrl & V
//ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4); // merge arrays of keys
if(ruleSetArr.indexOf() !== "undefined"){ // check if browser supports indexOf() : IE8 and earlier
var retRes = ruleSetArr.indexOf(key);
} else {
var retRes = $.inArray(key,ruleSetArr);
};
if(retRes == -1){ // if returned key not found in array, return false
return false;
} else if(key == 67 || key == 86){ // account for paste events
event.stopPropagation();
};
}).on('paste',function(event){
var $thisObj = $(this),
origVal = $thisObj.val(), // orig value
newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value
if(newVal.replace(/\D+/g, '') == ""){ // if paste value is not a number, insert orig value and ret false
$thisObj.val(origVal);
return false;
} else {
$thisObj.val(newVal.replace(/\D+/g, ''));
return false;
};
});
};
var inptElm = $('input[name="inputName"]');
inputIntTypeOnly(inptElm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="inputName" value="1">NuGet からダウンロードできるjquery.inputmask.jsライブラリを使います。
入力要素にクラスを与えます。この場合はregです。
<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>
そしてJavaScriptで私はマスクを設定しました：
var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });
これは数字専用ですが、正規表現を変更して「。」を受け入れることができます。
これを使用することによって、数字ではない文字を入力することは不可能です。一般的なフォーマットのためにこれらの入力マスクライブラリを持つことは有用です。
JQueryを使ったもう1つの簡単な方法：
$('.Numeric').bind('keydown',function(e){
if (e.which < 48 || e.which > 57)
return false;
return true;
})
以下のように、それぞれの入力クラスをNumericに設定します。
<input type="text" id="inp2" name="inp2" class='Numeric' />
one-liners のようなあなたのそれらのために。
string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
私はこのコードをinput type = "text"に使い、AngularJSを使ってキーを押すとアクティブにしますが、必要ならjQueryを使うことができます。このコードを、何らかの方法でキーを押すとアクティブになる関数に入れるだけです。
数字、数字+小数、数字+小数+数字のみが許可されます。
_ code _
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";
testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";
testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";
testFour = "622632463.23464236326324363"
=> "622632463.23";
これは米国通貨用に作成されましたが、次のように小数点以下第1位を超える小数点以下2桁までを許可するように変更できます。
変更コード
YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');
testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";
:)
function digitsOnly(obj) {
obj.value = obj.value.replace(/\D/g, "");
}
そして要素の中で
<input type="text" onkeyup="digitsOnly(this);" />
はい、HTML5はそうです。このコードを試してください（ w3school ）：
<!DOCTYPE html>
<html>
<body>
<form action="">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
<input type="submit" />
</form>
</body>
</html>
これは悪い文字を即座に取り除き、1つのドットだけを許し、短く、そしてバックスペースを許します。
$('.numberInput').keyup(function () {
s=$(this).val();
if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
私はいくつかの素晴らしい答えを見ましたが、私はそれらを可能な限り小さく単純なものにしたいので、誰かがそれから利益を得るでしょう。私はこのようにjavascriptのNumber()とisNaN機能を使います。
if(isNaN(Number(str))) {
// ... Exception it is NOT a number
} else {
// ... Do something you have a number
}
お役に立てれば。
少し調整しましたが、JavaScriptの奇妙なやり方に準拠するには、さらに多くの作業が必要です。
function validateNumber(myEvent,decimal) {
var e = myEvent || window.event;
var key = e.keyCode || e.which;
if (e.shiftKey) {
} else if (e.altKey) {
} else if (e.ctrlKey) {
} else if (key === 48) { // 0
} else if (key === 49) { // 1
} else if (key === 50) { // 2
} else if (key === 51) { // 3
} else if (key === 52) { // 4
} else if (key === 53) { // 5
} else if (key === 54) { // 6
} else if (key === 55) { // 7
} else if (key === 56) { // 8
} else if (key === 57) { // 9
} else if (key === 96) { // Numeric keypad 0
} else if (key === 97) { // Numeric keypad 1
} else if (key === 98) { // Numeric keypad 2
} else if (key === 99) { // Numeric keypad 3
} else if (key === 100) { // Numeric keypad 4
} else if (key === 101) { // Numeric keypad 5
} else if (key === 102) { // Numeric keypad 6
} else if (key === 103) { // Numeric keypad 7
} else if (key === 104) { // Numeric keypad 8
} else if (key === 105) { // Numeric keypad 9
} else if (key === 8) { // Backspace
} else if (key === 9) { // Tab
} else if (key === 13) { // Enter
} else if (key === 35) { // Home
} else if (key === 36) { // End
} else if (key === 37) { // Left Arrow
} else if (key === 39) { // Right Arrow
} else if (key === 190 && decimal) { // decimal
} else if (key === 110 && decimal) { // period on keypad
// } else if (key === 188) { // comma
} else if (key === 109) { // minus
} else if (key === 46) { // Del
} else if (key === 45) { // Ins
} else {
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
そしてそれは次のように呼ばれます：
$('input[name=Price]').keydown(function(myEvent) {
validateNumber(myEvent,true);
});
私がここで醜い棒で死んだ馬を打っていないことを願っていますが、私は私のウェブサイトの量の入力にこれを使用しています、それは1から99までの数字しか許さない.
試してみてください。 https://jsfiddle.net/83va5sb9/ /
<input min="1" type="text" id="quantity" name="quantity" value="1"
onKeyUp="numbersonly()">
<script>
function numbersonly() {
var str = document.getElementById("quantity").value
var newstr = ""
for (i = 0; i < str.length; i++) {
for (ii = 1; ii < 10; ii++) {
if (str.charAt(i).indexOf(ii) > -1) {
newstr += str.charAt(i)
}
}
}
if (newstr == "") {
newstr = 1
}
if (parseInt(newstr) > 99) {
newstr = 99
}
document.getElementById("quantity").value = newstr
}
</script>
このような状況では、正規表現とmatch関数がうまく機能します。たとえば、グラフ上の座標として機能する4つの入力ボックスを検証するために次のように使用しました。それは適度にうまくいきます。
function validateInput() {
if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
location.reload();
}
}
'' 'onkeydown' ''イベントを使用して、許可されているキーの1つではない場合はイベント（event.preventDefaultまたはそのようなもの）をキャンセルしてください。
何を検証する準備ができたらこの関数を呼び出します。ここでテキストボックスを使いました
私のHTMLでは：
<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />
私のJavaScriptコードでは：
function check(num){
var onlynumbers = true
for (var i = 0; i < (num.length - 1); i++) {
if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
alert("please make sure that only numbers have been entered in the Quantaty box");
onlynumbers = false
}
}
if (onlynumbers == true) {
//Execute Code
}
}
これは非推奨のkeyCodeやwhichを使わず、非入力キーをブロックせず、そして純粋なjavascriptを使う、とても短い解決策です。 （Chromium 70.0.3533、Firefox 62.0、およびEdge 42.17134.1.0でテスト済み）
HTML：
<input type="text" onkeypress="validate(event)">
JS：
function validate(ev) {
if (!ev) {
ev = window.event;
}
if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
return ev.preventDefault();
}
}
数字の入力をブロックする方法を探していたのですが、答えが見つからないので、このコードは問題なく動作しました。
Onkeypressイベントに入力するだけです。
あなただけの数字の入力をブロックする必要がある場合、私はこれがうまくいくと思います。
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
私は古い記事を知っていますが、これは誰かに役立つと思いました。最近、テキストボックスを小数点以下5桁までに制限する必要がありました。私の場合もユーザーの入力は0.1未満でなければなりませんでした
<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText" name="textfield" onkeyup="return doCheck('#fmargin',event);">
これがdoCheck関数です。
function doCheck(id,evt)
{
var temp=parseFloat($(id).val());
if (isNaN(temp))
temp='0.0';
if (temp==0)
temp='0.0';
$(id).val(temp);
}
整数入力を強制することを除いて、これは同じ関数です。
function doCheck(id,evt)
{
var temp=parseInt($(id).val());
if (isNaN(temp))
temp='0';
$(id).val(temp);
}
誰かに役立つことを願っています
私はこの機能を使い終えました：
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) return false;"
これはIEやChromeでうまく機能します。Firefoxでもうまく機能しない理由はよくわかりません。Firefoxのタブキーをブロックする機能です。
Firefoxでタブキーがうまく動作するようにこれを追加します。
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
それが愚かなUXになると、人は常に「ユーザーの知性」の基準点を守るように努めるべきです。
数字以外のすべてを無視すると、ドットとハイフンは完璧な選択のように思えますが、 任意のコンテンツを入力し、完了したら入力を浄化することも検討する必要があります。有効な数値でない場合は、error を表示します。この方法では、ユーザーが何をしようとしても、結果は常に有効になります。ユーザーが警告やエラーメッセージを理解できないほど素朴な場合は、ボタンを押しても何も起こらないことを確認しても（キーコードの比較のように）混乱するだけです。
また、フォームの場合、検証とエラーメッセージの表示はほとんど必要です。それで、規定はすでにそこにあるかもしれません。これがアルゴリズムです。
フォーカスを失った場合、またはフォームを送信した場合は、次のようにしてください。
１．１。入力からコンテンツを読み取り、結果にparseFloatを適用します
１．２。結果がアクセス不可番号（NaN）の場合は、入力フィールドをリセットし、 エラーメッセージ ：をポップアップ表示します。有効な番号を入力してください：たとえば235または-654または321.526または-6352.646584 "。
1.3。そうでなく、String（result）！==（入力内容）の場合、フィールドの値をresultに変更し、show warning message ：を入力してください。入力した値は変更されています。有効な数値を入力してください（例：235または -654または321.526または-6352.646584 "）。未確認の値を許可できないフィールドの場合は、この条件をステップ1.2に追加することができます。
1.4。そうでなければ、何もしません。
この方法では、 最小値、最大値、小数点以下などに基づいて検証を実行するという追加の利点も得られます。必要に応じて ステップ1.2の後の結果に対してこれらの操作を実行するだけです。
デメリット：
入力によって、フォーカスが失われるかフォームが送信されるまで、ユーザーは任意の値を入力できます。しかし、分野を埋めることに関する指示が十分に明確であるならば、ケースの90％で、これは出ないかもしれません。
ステップ1.3を使用して警告を表示すると、ユーザーには見落とされ、意図しない入力が行われる可能性があります。エラーを投げたり警告を適切に表示することでこれを解決できます。
速度。これはregexメソッドよりもマイクロ秒単位で遅くなるかもしれません。
利点： ユーザーが読み、理解するための基本的な知識を持っていると仮定します。
オプションで高度にカスタマイズ可能.
ブラウザ間で言語に依存しないで動作します。
エラーや警告を表示するためにフォームですでに利用可能な機能を利用します。
これはペルシャ語とアラビア語の番号に対しても働きます:)
setNumericInput: function (event) {
var key = window.event ? event.keyCode : event.which
if (event.keyCode === 8 ||
(key >= 48 && key <= 57) ||
(key >= 1776 && key <= 1785)) {
return true
} else {
event.preventDefault()
}
}