テキストフィールドを数字のみに制限する最良の方法は？
次のJavascriptを使用して、Webサイトのテキストフィールドが数値入力のみを受け入れ、他の文字や文字を受け入れないように制限しています。問題は、次のような他のすべてのキー入力を本当に拒否することです ctrl-A テキスト、または他のブラウザ機能を選択する ctrl-T または ctrl-W テキストボックスが選択されている間。数値入力のみを許可し、通常のコマンド（フィールドに直接入力されない）をブロックしない、より良いスクリプトを知っている人はいますか？おかげで今私が使用しているコードは次のとおりです。
function numbersonly(e, decimal)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
編集：提供された解決策のいずれも、次のようなコマンドを許可するという私の問題を解決していません ctrl-A テキストボックスが選択されている間。これがここでの質問の全体的なポイントであったため、元のスクリプトの使用に戻りました。しかたがない。
これは数字だけのために別の時間に作成したもので、すべてのフォーマッタも使用できます。
jQuery
_$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.Push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
_それを試してみてください
メモとして、貼り付けイベントをサポートしていない貼り付け/コンテキストメニューおよびブラウザーのために、送信側/サーバー側でもフィルターを適用する必要があります。
編集して複数の方法を詳しく説明する
あなたは「受け入れられた」答えを跳ね返っているのを見るので、私は何かを明確にします。ここにリストされている方法のいずれかを実際に使用することができ、それらはすべて機能します。私が個人的にしたいことは、ライブクライアント側のフィルタリングに私のものを使用し、他の人が提案したように送信側とサーバー側でRegExを使用することです。ただし、100％有効なクライアント側はありませんコンソールにdocument.getElementById('theInput').value = 'Hey, letters.';を入れてバイパスすることを妨げるものは何もないのでクライアント側の検証（ポーリングを除くが、コンソールからsetIntervalをキャンセルすることもできます）。好きなクライアント側のソリューションを使用しますが、送信側とサーバー側にも何かを実装してください。
編集2-@ティムダウン
申し分なく、私は考えていなかった2つのことを調整しなければなりませんでした。最初に、更新されたキーダウンの代わりにキーを押しますが、IE（真剣にMicrosoft !?）にindexOfがないため、上記の例も壊れます。
_$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.Push(i);
if (!($.inArray(k,a)>=0))
e.preventDefault();
});
_新しいjsfiddle： http://jsfiddle.net/umNuB/
.keypress(function(e)
{
var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];
if (!($.inArray(e.which, key_codes) >= 0)) {
e.preventDefault();
}
});
BackspaceキーとDeleteキーも必要です;）
これはIEで動作します、Chrome AND Firefox：
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
var invalidChars = /[^0-9]/gi
if(invalidChars.test(ob.value)) {
ob.value = ob.value.replace(invalidChars,"");
}
}
</script>
</head>
<body>
<input type="text" onkeyup="checkInput(this)"/>
</body>
</html>
キーが押されるか、テキストボックスがフォーカスを失うたびに、正規表現を使用して数字以外の文字を取り除きます。
var numInput;
window.onload = function () {
numInput = document.getElementById('numonly');
numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
{
numInput.value = numInput.value.replace(/[^0-9]+/,"");
}
}
入力した文字に関する情報を含む唯一のイベントはkeypressです。 keyCodeまたはkeydownイベントのkeyupプロパティから推測できる文字に関連するものは、信頼性が低く、特定のキーボードマッピングに依存しています。以下は、keypressイベントから取得した文字を使用することにより、すべての主要なブラウザーで非数値キーボード入力を防止します。ユーザーが数値以外のテキストを貼り付けたりドラッグしたりすることを妨げません。
var input = document.getElementById("your_input");
input.onkeypress = function(evt) {
evt = evt || window.event;
if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
return false;
}
}
};
私はこれを使用します：
oEl.keypress(function(ev)
{
var sKey = String.fromCharCode(ev.which);
if (!sKey.match(/[0-9]/) || !sKey === "")
ev.preventDefault();
});
利点は、フィールドへの入力を提供しないすべてのキーが引き続き許可されるため、すべての特別なキーについて心配する必要がないことです。 CTRL + Rのようなコンボでも機能します。
[〜＃〜] edit [〜＃〜]これはFirefoxで機能しないため、関数を少し変更する必要がありました。
oEl.keypress(function(ev)
{
var iKeyCode = ev.which || ev.keyCode;
var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
var sKey = String.fromCharCode(iKeyCode);
if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
ev.preventDefault();
}
});
説明すべてのブラウザーはjquerys keypressイベントを異なる方法で処理します。 FFで機能させるには、$。inArrayチェックが追加されます。 firefoxsのkeypress-eventはstrg + tabのような組み合わせが使用されたときにトリガーされませんが、他の組み合わせではトリガーされます。
次のコードは、私が広く使用しているものです。フォーラムでスクリプトを見つけましたが、ニーズに合わせて修正および拡張しました。
<script type="text/javascript">
// Restrict user input in a text field
// create as many regular expressions here as you need:
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9\.]/g;
var alphaOnly = /[A-Za-z]/g;
var usernameOnly = /[0-9A-Za-z\._-]/g;
function restrictInput(myfield, e, restrictionType, checkdot){
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if user pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if the user presses other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
if(checkdot == "checkdot"){
return !isNaN(myfield.value.toString() + character);
} else {
return true;
}
} else {
return false;
}
}
}
</script>
さまざまな使用方法は次のとおりです。
<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">
追加 <script type="text/javascript" src="jquery.numeric.js"></script>次に使用する
$("element").numeric({ decimal: false, negative: false });
すでに多くの回答があることを知っていますが、simplicityのために単純で自明なである別の回答を追加したいと思います我々キーコードを覚える必要はありませんそして、それはすべてのブラウザでも動作します。
document.getElementById('myinput').onkeydown = function(e)
{
console.log(e.key);
//console.log(e.target.value);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
return true;
break;
case ".":
if (e.target.value.indexOf(".") == -1)
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
}<input type="text" placeholder="Enter Value" id="myinput" />これは、単一の小数点を入力できるようにするロバートの答えのバリエーションです。小数点がすでに入力されている場合、数字のみが入力として受け入れられます。
// Allow only decimal number input
$('#decimalInput').keypress(function (e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.Push(i);
// allow a max of 1 decimal point to be entered
if (this.value.indexOf(".") === -1) {
a.Push(46);
}
if (!(a.indexOf(k) >= 0)) e.preventDefault();
$('span').text('KeyCode: ' + k);
});
短い方法と理解しやすい：
$('#someID').keypress(function(e) {
var k = e.which;
if (k <= 48 || k >= 58) {e.preventDefault()};
});
これにより、テンキー入力も有効になります。
.keydown(function(event){
if(event.keyCode == 8 || event.keyCode == 46)
return true;
if(event.keyCode >= 96 && event.keyCode <= 105)
return true;
if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
return false;
});
すべての答えは時代遅れで長く、willはユーザーに迷惑をかけます。それらのほとんどは、貼り付けられたコンテンツをフィルタリングまたは許可しません。
入力をフィルタリングする代わりに、フォームを送信する前に検証を行い、次にサーバー側も検証します。
HTMLには検証が含まれています。
<input type="number" pattern="[0-9]+">
これにより、モバイルの数字キーボードも有効になります。
フロントエンド（Javascript、HTMLなど）を使用してこれをどれだけ厳しく制御しても、ユーザーがJavaScriptをオフにすることを止めるものは何もないため、サーバーで検証する必要があります意図的に迷惑メールをフォームに投稿して、ハッキングを試みます。
私のアドバイス：HTML5マークアップを使用して、それをサポートするブラウザーが使用できるようにします。また、以前に提案されたJQueryオプションを使用します（初期のソリューションには欠陥があるかもしれませんが、コメントはそれを通して機能しているようです）。そして、サーバー側の検証も行います。
ここに私の解決策があります：以下の機能するものの組み合わせ。
var checkInput = function(e) {
if (!e) {
e = window.event;
}
var code = e.keyCode || e.which;
if (!e.ctrlKey) {
//46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
return true;
//35..39 - home, end, left, right
if (code >= 35 && code <= 39)
return true;
//numpad numbers
if (code >= 96 && code <= 105)
return true;
//keyboard numbers
if (isNaN(parseInt(String.fromCharCode(code), 10))) {
e.preventDefault();
return false;
}
}
return true;
};
私はこれを自分で理解しようとしていて、あなたの質問に出会いました。ここに私が思いついた解決策があります。
// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
var input;
var f = function (e) {
var unicodeRe = /U\+(\d+)/;
// Chrome doesn't support the standard key property, so use keyIdentifier instead.
// Instead of the actual character that "key" returns, keyIdentifier returns
// A string such as "U+004F" representing the unicode character.
// For special characters (e.g., "Shift", a string containing the name of the key is returned.)
var ch = e.key || e.keyIdentifier;
var match = ch.match(unicodeRe);
// keyIdentifier returns a unicode. Convert to string.
if (match) {
ch = String.fromCharCode(Number.parseInt(match[1], 16));
}
console.log(ch);
if (ch.length === 1 && /[^0-9]/.test(ch)) {
if (!/[\b]/.test(ch)) { // Don't prevent backspace.
e.preventDefault();
}
}
};
for (var i = 0, l = inputs.length; i < l; i += 1) {
input = inputs[i];
input.onkeydown = f;
}
}(document.querySelectorAll("input[type=number],#routeFilterBox")));
編集：私のソリューションでは、ユーザーがChromeのテンキーを使用して数字を入力できないことを発見しました。 0〜9のキーパッドキーは、0の場合は文字 "` "を返し、残りの数字キーの場合はA-Iを返しているようです。
数字以外のテキストフィールドへの入力をブロックしながら、他のボタンが機能するようにする（削除、シフト、タブなど）には、 Javascriptキーコードの参照 ; 65から（222まで）のすべてをブロックできます。
JqueryとJavascriptを使用すると、次のようになります。
$('#textFieldId').keydown(function(event) {
if ( event.keyCode > 64 ) {
event.preventDefault();
}
});
Jqueryを使用するかどうかに関係なく、キーコードはJavascriptで同じになります。
数値入力の私の現在のソリューションがあり、異なるブラウザでテストする必要がありますが、動作するようです
カンマとピリオドの区切り文字（チェコ語のネイティブはカンマ）、スペース、テンキー/キーボードの数字入力をサポートします。 Ctrl + C Ctrl + AまたはCtrl + X、矢印ナビゲーション、および削除ブロックCtrl + Vを許可します。 React入力をぼかすことによるエスケープキー。
私のコーヒースクリプトを見る：
(($) ->
$.fn.onlyNumbers = ->
@each ->
$(@).keydown (e) ->
# get code of key
code = if e.keyCode then e.keyCode else e.which
return $(@).blur() if code is 27 # blur on escape
return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
return if code in [96..105] # numpad numbers
return if code in [48..57] # numbers on keyboard
return if code in [35..39] # 35..39 - home, end, left, right
return if code in [188, 190, 32] # comma, period, space
return if code in [44] # comma, period,
e.returnValue = false # IE hate you
e.preventDefault();
$(@).keypress (e) ->
code = if e.keyCode then e.keyCode else e.which
return if code in [44, 46, 32] # comma, period, space
return if code in [48..57] # numbers on keyboard
e.returnValue = false # IE hate you
e.preventDefault();
) jQuery
ここでコンパイルされたJavascriptを取得できます http://goo.gl/SbyhXN
このJavaScript関数は、Textboxのアルファベットと特殊文字を制限するために使用され、数字、削除、矢印キー、およびバックスペースのみが許可されます。 JavaScriptコードスニペット-TextBoxでの数字の許可、アルファベットと特殊文字の制限
テスト済みIE＆Chrome。
JavaScript関数
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
JavaScriptを使用したHTMLソースコード
<html>
<head>
<title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
</head>
<body style="text-align: center;">
<h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
<big>Enter numbers only: </big>
<input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>
</html>
Ctrlキーのキーコード（17、18、19、20）を受け入れるように変更できます。コードは次のようになります。
function numbersonly(e, decimal) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
これはその場合の私のプラグインです：
(function( $ ) {
$.fn.numbers = function(options) {
$(this).keypress(function(evt){
var setting = $.extend( {
'digits' : 8
}, options);
if($(this).val().length > (setting.digits - 1) && evt.which != 8){
evt.preventDefault();
}
else{
if(evt.which < 48 || evt.which > 57){
if(evt.keyCode != 8){
evt.preventDefault();
}
}
}
});
};
})( jQuery );
つかいます：
$('#limin').numbers({digits:3});
$('#limax').numbers();
このようにすると、テキストボックス内の数字のみを受け入れることができます。
function onChange(event){
var ckeckChars = /[^0-9]/gi;
if(checkChars.test(event.target.value)) {
event.target.value = event.target.value.replace(ckeckChars,"");
}
document.getElementById('myinput').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}
私の機能：
$('.input_integer_only').on('input', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
$('.input_float_only').on('input', function(e) {
var $var = $(this).val().replace(/[^0-9\.]/g, '');
var $aVar = $var.split('.');
if($aVar.length > 2) {
$var = $aVar[0] + '.' + $aVar[1];
}
$(this).val($var);
});