JQueryを使用してHTML入力ボックスに数値（0-9）のみを許可する方法
（0,1,2,3,4,5 ... 9）0-9のような数字のみを許可する入力テキストフィールドがあるWebページを作成しています。
JQueryを使ってこれを行うにはどうすればよいですか。
注：これは更新された回答です。以下のコメントは、キーコードを台無しにした古いバージョンに関するものです。
jQuery
以下のinputFilterプラグインを使用すると、さまざまな数値フィルターを含む、テキスト<input>でany種類の入力フィルターを使用できます（以下）。
他のほとんどのソリューションとは異なり、このは正しくサポートしていますコピー+貼り付け、ドラッグ+ドロップ、すべてのキーボードショートカット、すべてのコンテキストメニュー操作、すべての入力不可能なキー（例：カーソルとナビゲーションキー）、キャレットの位置、すべての言語とプラットフォームのすべてのキーボードレイアウト、および IE 9以降のすべてのブラウザー 。
自分で試してみてください JSFiddleで 。
// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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);
}
});
};
}(jQuery));
$(document).ready(function() {
// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
return /^\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サーバー側の検証を行うことに注意してください！
純粋なJavaScript（jQueryなし）
これにはjQueryは実際には必要ありません。純粋なJavaScriptでも同じことができます。 この回答 を参照するか、自分で試してみてください 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で 。
これが私が使う関数です：
// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 ||
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
};
それから、あなたはそれをあなたのコントロールにアタッチすることができます：
$("#yourTextBoxName").ForceNumericOnly();
列をなして：
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">控えめなスタイル（jQueryあり）：
$('input[name="number"]').keyup(function(e)
{
if (/\D/g.test(this.value))
{
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">単純なJavaScriptの正規表現を使用して、純粋な数字の文字をテストすることもできます。
/^[0-9]+$/.test(input);
入力が数値の場合はtrue、そうでない場合はfalseを返します。
またはイベントキーコードの場合は、以下を簡単に使用します。
// Allow: backspace, delete, tab, escape, enter, ctrl+A and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
var charValue = String.fromCharCode(e.keyCode)
, valid = /^[0-9]+$/.test(charValue);
if (!valid) {
e.preventDefault();
}
あなたはこのように入力イベントで使用することができます：
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
しかし、このコード特権は何ですか？
- モバイルブラウザで動作します（keydownとkeyCodeには問題があります）。
- "on"を使用しているため、AJAX生成コンテンツでも機能します。
- 貼り付けイベントなど、キーダウンよりも優れたパフォーマンス。
短くて甘い - たとえこれが30回以上の答えの後にそれほど多くの注目を集めることがないとしても。
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
JavaScript関数 isNaN を使う、
if (isNaN($('#inputid').val()))
if（isNaN（document.getElementById（ 'inputid'）。val（）））
if (isNaN(document.getElementById('inputid').value))
更新： そして、jQueryを使ってそれについて話している素敵な記事： HTMLテキストボックスへの入力を数値に制限する
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
ソース： http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
私たちの内部共通のjsファイルでこれを使います。この動作が必要な入力にクラスを追加するだけです。
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
私にとってより簡単なものは
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
なぜそんなに複雑なのですか？ HTML5のパターン属性があるのでjQueryも必要ありません。
<input type="text" pattern="[0-9]*">
クールなことは、モバイルデバイス上で数字キーボードが表示されることです。これはjQueryを使用するよりもずっと優れています。
この非常に単純な解決策を使用して同じことをすることができます
$("input.numbers").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />このリンク を参照してください。それは完璧に動作します！
HTML5のpattern属性は要素の値がチェックされる正規表現を指定します。
<input type="text" pattern="[0-9]{1,3}" value="" />
注：pattern属性は、テキスト、検索、URL、tel、Eメール、およびパスワードの入力タイプで機能します。
[0-9]は任意の正規表現条件に置き換えることができます。
{1,3}最小1桁を表し、最大3桁を入力できます。
jQuery.validate を使用して非常に簡単なもの
$(document).ready(function() {
$("#formID").validate({
rules: {
field_name: {
numericOnly:true
}
}
});
});
$.validator.addMethod('numericOnly', function (value) {
return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
関数suppressNonNumericInput（event）{
if( !(event.keyCode == 8 // backspace
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad
) {
event.preventDefault(); // Prevent character input
}
}
私は他の解決策がそうであるようにユーザーがテキストまたはコピーペーストを選択することを妨げない非常によくて簡単な解決策に至りました。 jQueryスタイル:)
$("input.inputPhone").keyup(function() {
var jThis=$(this);
var notNumber=new RegExp("[^0-9]","g");
var val=jThis.val();
//Math before replacing to prevent losing keyboard selection
if(val.match(notNumber))
{ jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
あなたはこのJavaScript関数を使用することができます：
function maskInput(e) {
//check if we have "e" or "window.event" and use them as "event"
//Firefox doesn't have window.event
var event = e || window.event
var key_code = event.keyCode;
var oElement = e ? e.target : window.event.srcElement;
if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
if ((key_code > 47 && key_code < 58) ||
(key_code > 95 && key_code < 106)) {
if (key_code > 95)
key_code -= (95-47);
oElement.value = oElement.value;
} else if(key_code == 8) {
oElement.value = oElement.value;
} else if(key_code != 9) {
event.returnValue = false;
}
}
}
そして、あなたはこのようにあなたのテキストボックスにそれをバインドすることができます：
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
私はプロダクションで上記を使用します、そして、それは完全に働きます、そしてそれはクロスブラウザです。さらに、これはjQueryには依存しないため、インラインJavaScriptを使用してテキストボックスにバインドできます。
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
みんなに役立つと思います
$('input.valid-number').bind('keypress', function(e) {
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
})
これは私がしばらく前に作成した簡単な解決策です。あなたは私の記事でそれについてもっと読むことができます：
http://ajax911.com/numbers-numeric-field-jquery/ /
$("#textfield").bind("keyup paste", function(){
setTimeout(jQuery.proxy(function() {
this.val(this.val().replace(/[^0-9]/g, ''));
}, $(this)), 0);
});
これは壊れないようです。
// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
this.value = this.value.replace(/[^0-9\.]+/g, '');
if (this.value < 1) this.value = 0;
});
// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
これがjQuery UI Widgetファクトリーを使った答えです。許可される文字は簡単にカスタマイズできます。
$('input').numberOnly({
valid: "0123456789+-.$,"
});
それは数字、シャープ記号そしてドル金額を許すでしょう。
$.widget('themex.numberOnly', {
options: {
valid : "0123456789",
allow : [46,8,9,27,13,35,39],
ctrl : [65],
alt : [],
extra : []
},
_create: function() {
var self = this;
self.element.keypress(function(event){
if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
{
return;
}
if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
{
return;
}
if(event.altKey && self._codeInArray(event,self.options.alt))
{
return;
}
if(!event.shiftKey && !event.altKey && !event.ctrlKey)
{
if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
{
return;
}
}
event.preventDefault();
});
},
_codeInArray : function(event,codes) {
for(code in codes)
{
if(event.keyCode == codes[code])
{
return true;
}
}
return false;
}
});
私は上記の@ user261922の投稿に基づいて私が書いた、あなたがすべて、タブを選択し、同じページ上の複数の「数字のみ」フィールドを扱うことができるようにわずかに修正した。
var prevKey = -1, prevControl = '';
$(document).ready(function () {
$(".OnlyNumbers").keydown(function (event) {
if (!(event.keyCode == 8 // backspace
|| event.keyCode == 9 // tab
|| event.keyCode == 17 // ctrl
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105) // number on keypad
|| (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id)) // ctrl + a, on same control
) {
event.preventDefault(); // Prevent character input
}
else {
prevKey = event.keyCode;
prevControl = event.currentTarget.id;
}
});
});
HTML5番号の入力を試すことができます。
<input type="number" placeholder="enter the number" min="0" max="9">
Min属性が0に、max属性が9に設定されているため、この入力タグ要素は0から9 の間の値のみを取ります。
訪問の詳細については http://www.w3schools.com/html/html_form_input_types.asp
私は少し手助けをしたいと思い、私は自分のバージョンのonlyNumbers関数を作りました。
function onlyNumbers(e){
var keynum;
var keychar;
if(window.event){ //IE
keynum = e.keyCode;
}
if(e.which){ //Netscape/Firefox/Opera
keynum = e.which;
}
if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
(event.keyCode >= 96 && event.keyCode <= 105)))return true;
if(keynum == 110 || keynum == 190){
var checkdot=document.getElementById('price').value;
var i=0;
for(i=0;i<checkdot.length;i++){
if(checkdot[i]=='.')return false;
}
if(checkdot.length==0)document.getElementById('price').value='0';
return true;
}
keychar = String.fromCharCode(keynum);
return !isNaN(keychar);
}
入力タグ "... input ... id =" price "を追加するだけでonkeydown =" return onlyNumbers（event） "..."だけで完了です。
入力値が数値であることを確認する簡単な方法は次のとおりです。
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
あなたはタブを許可したいでしょう：
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
私も答えたいと思います:)
$('.justNum').keydown(function(event){
var kc, num, rt = false;
kc = event.keyCode;
if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
return rt;
})
.bind('blur', function(){
num = parseInt($(this).val());
num = isNaN(num) ? '' : num;
if(num && num < 0) num = num*-1;
$(this).val(num);
});
それだけです…ただの数字です。 :)ほとんど「ぼかし」を使っても動作しますが、...
この方法をJqueryに適用するだけで、テキストボックスを検証して数字だけを受け入れることができます。
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
この解決策を試してください ここ
テンキーとタブキーも機能していることを確認する必要があります。
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
}
else {
event.preventDefault();
}
}
押された文字を検出するためにキーストロークを使用することには、驚くべき互換性の問題があります。それについての詳細は、 quirksmode を参照してください。
実際のユニバーサル文字を評価するために使用できる$（element）.val（）メソッドがあるので、キーアップを使用してフィルタを作成することをお勧めします。
そうすれば、次のような正規表現を使ってNON以外の数字を除外することができます。
置換（/ [^ 0-9]/g、 ''）;
シフトアップや貼り付けの問題など、キーアップが常にあり、値が常に評価されるため（javascriptがオフになっていない限り）、これはすべての問題を処理します。
それで...これをJQueryに変えるために...これは私が書いているちょっと未完成のプラグインです、それはinputmaskと呼ばれ、そして終了時により多くのマスクをサポートするでしょう。今のところそれは働く数字マスクを持っています。
これは行きます...
/**
* @author Tom Van Schoor
* @company Tutuka Software
*/
(function($) {
/**
* @param {Object}
* $$options options to override settings
*/
jQuery.fn.inputmask = function($$options) {
var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);
return this.each(function() {
// $this is an instance of the element you call the plug-in on
var $this = $(this);
/*
* This plug-in does not depend on the metadata plug-in, but if this
* plug-in detects the existence of the metadata plug-in it will
* override options with the metadata provided by that plug-in. Look at
* the metadata plug-in for more information.
*/
// o will contain your defaults, overruled by $$options,
// overruled by the meta-data
var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;
/*
* if digits is in the array 'validators' provided by the options,
* stack this event handler
*/
if($.inArray('digits', o.validators) != -1) {
$this.keyup(function(e) {
$this.val(stripAlphaChars($this.val()));
});
}
/*
* There is no such things as public methods in jQuery plug-ins since
* there is no console to perform commands from a client side point of
* view. Typically only private methods will be fired by registered
* events as on-click, on-drag, etc... Those registered events could be
* seen as public methods.
*/
// private method
var stripAlphaChars = function(string) {
var str = new String(string);
str = str.replace(/[^0-9]/g, '');
return str;
}
});
};
// static public functions
//jQuery.fn.inputmask.doSomething = function(attr) {
//};
// static public members
//jQuery.fn.inputmask.someStaticPublicMember;
// some default settings that can be overridden by either $$options or
// metadata
// If you need callback functions for the plug-in, this is where they get
// set
jQuery.fn.inputmask.defaults = {
validators : []
};
})(jQuery);
それを使用するには、単にしてください：
$('#someElementId').inputmask({
validators: ['digits','someOtherNotYetImplementedValidator']
});
'someOtherNotYetImplementedValidator'は、将来の追加のマスク/バリデータのためにこれをどのように拡張できるかを示すためのものです。あなたはそれを追加するか、またはそれを除外することができます、それは何も壊しません;-)
余計なコメントをまとめるための秘訣、私はここで仕事をする人々のために作成したテンプレートを使用しています。
これが助けになることを願っています。
これが正規表現のやり方です。
$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
;））;
https://jsfiddle.net/astrapi69/qbk2vjty/1/ /
数字以外の文字を制限したい場合は、正規表現を他のものに変更できます。
コピー＆ペーストの問題に対処し、廃止予定のkeyCode属性を置き換える、より良いユーザエクスペリエンスのためのソリューションを更新しました。
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の結果に対して）
トップアンサーに問題がありました。テンキーは含まれていませんし、shift + numberを押しても特殊記号も表示されるべきではありません。
私がこのスレッドで見つけた最良のリンクはこれでした： http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-テキストボックスから数値へ
私はstackoverflowが初めてなので、もっと良い解決策をトップポストに編集できるかどうかはわかりません。
答え＃3をもう少し詳しく説明すると、次のようにします（注：キーボードやマウスによる貼り付け操作はサポートされていません）。
$('#txtNumeric').keypress(
function(event) {
//Allow only backspace and delete
if (event.keyCode != 46 && event.keyCode != 8) {
if (!parseInt(String.fromCharCode(event.which))) {
event.preventDefault();
}
}
}
);
発音区別符号と特殊文字を解決する必要がある場合は、これを使用してみてください。
$(this).on( 'keypress', function( e )
{
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
e.preventDefault();
}
});
ここで多くの人がkeycode property を使っていますが、これは覚えやすいものではありません。ロケールの問題がない場合は、単に実際にはユーザーが入力する入力であるkeyを使用できます。
これを参照してください Fiddle
$("#txt").on("keypress",function(e){
console.log("Entered Key is " + e.key);
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 ($(this).val().indexOf(".") == -1) //Checking if it already contains decimal. You can Remove this condition if you do not want to include decimals in your input box.
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Enter Value
<input id="txt" type="text" />問題が次の簡単なコードを参照してください。
この例には10進数入力の検証も含まれています。
この質問によると、それは必須ではないので、単にケース「。」を削除することができます。 10進数のエントリを削除します。
このjQueryコードは、入力中に入力された文字を除外します。 Shift、 Ctrl または Alt が押されています。
$('#AmountText').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
e.preventDefault(); // Prevent character input
} else {
var n = e.keyCode;
if (!((n == 8) // backspace
|| (n == 46) // delete
|| (n >= 35 && n <= 40) // arrow keys/home/end
|| (n >= 48 && n <= 57) // numbers on keyboard
|| (n >= 96 && n <= 105)) // number on keypad
) {
e.preventDefault(); // Prevent character input
}
}
});
onkeypressやonpastのように、HTMLコード内で試してみてください。
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpast="return false">
HTML5入力タイプ番号 を使用すると、番号エントリのみを制限することができます。
<input type="number" name="someid" />
これはHTML 5苦情ブラウザでのみ動作します。あなたのHTMLドキュメントのDoctypeが以下であることを確認してください。
<!DOCTYPE html>
一般的な目的のために、以下のようにJS検証をすることができます：
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条件」をこれに置き換えます。
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
JSFiddleデモ： http://jsfiddle.net/Gagan_Gami/nSjy7/333/
それはあなたが探しているものにはやり過ぎるかもしれません、それでも私はautoNumeric（）と呼ばれるjQueryプラグインを提案します - それは素晴らしいです！
数値、小数精度、最大/最小値などに制限できます。
これが私が最近これを達成するために書いた理由です。私はこれがすでに答えられているのを知っています、しかし私は後で使うためにこれを残します。
この方法では、キーボードとテンキーの両方、バックスペース、タブ、左右の矢印を0から9までしか使用できません（通常のフォーム操作）
$(".numbersonly-format").keydown(function (event) {
// Prevent shift key since its not needed
if (event.shiftKey == true) {
event.preventDefault();
}
// Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
// Allow normal operation
} else {
// Prevent the rest
event.preventDefault();
}
});
パターンを追加することで、テキスト入力にHTML 5検証を使用できます。正規表現やkeyCodeを使って手動で検証する必要はありません。
<input type="text" pattern="[0-9.]+" />
$("input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = this.value.slice(0, -1);
});
入力は可能ですが単純ではありません[type = number] ...
[type = "number"] の問題は、最後に無効な文字しか削除できないことです。ユーザエージェントは、入力が無効な場合は常に空の文字列を返します。
W3C HTML5仕様から：
要素の値が有効な浮動小数点数ではない場合は、を代わりに空の文字列に設定します。
https://dev.w3.org/html5/spec-LC/number-state.html#number-state
これは前の入力値を手で保存する方法が必要であることを意味します。
数値入力の場合、解は次のようになります。
$("input[type=number], input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = $(this).data("current-valid") || "";
else
$(this).data("current-valid", this.value);
});
残念ながら、これはIEおよびEdgeでは機能しません。これらのブラウザについては、上記のパターン解決方法に頼る必要があります。ただし、この単純なポリフィルでも数値入力を使用できます。
$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");
/**
Makes the textbox to accept only numeric input
*/
(function($) {
$.fn.allowOnlyNumeric = function() {
/**
The interval code is commented as every 250 ms onchange of the textbox gets fired.
*/
// var createDelegate = function(context, method) {
// return function() { method.apply(context, arguments); };
// };
/**
Checks whether the key is only numeric.
*/
var isValid = function(key) {
var validChars = "0123456789";
var validChar = validChars.indexOf(key) != -1;
return validChar;
};
/**
Fires the key down event to prevent the control and alt keys
*/
var keydown = function(evt) {
if (evt.ctrlKey || evt.altKey) {
evt.preventDefault();
}
};
/**
Fires the key press of the text box
*/
var keypress = function(evt) {
var scanCode;
//scanCode = evt.which;
if (evt.charCode) { //For ff
scanCode = evt.charCode;
}
else { //For ie
scanCode = evt.keyCode;
}
if (scanCode && scanCode >= 0x20 /* space */) {
var c = String.fromCharCode(scanCode);
if (!isValid(c)) {
evt.preventDefault();
}
}
};
/**
Fires the lost focus event of the textbox
*/
var onchange = function() {
var result = [];
var enteredText = $(this).val();
for (var i = 0; i < enteredText.length; i++) {
var ch = enteredText.substring(i, i + 1);
if (isValid(ch)) {
result.Push(ch);
}
}
var resultString = result.join('');
if (enteredText != resultString) {
$(this).val(resultString);
}
};
//var _filterInterval = 250;
//var _intervalID = null;
//var _intervalHandler = null;
/**
Dispose of the textbox to unbind the events.
*/
this.dispose = function() {
$(this).die('change', onchange);
$(this).die('keypress', keypress);
$(this).die('keydown', keydown);
//window.clearInterval(_intervalHandler);
};
$(this).live('change', onchange);
$(this).live('keypress', keypress);
$(this).live('keydown', keydown);
//_intervalHandler = createDelegate(this, onchange);
//_intervalID = window.setInterval(_intervalHandler, _filterInterval);
}
})(jQuery);
上記の$プラグインはAjaxControlToolkitフィルタテキストボックスextender.jsから書かれています。
ただし、AjaxControlToolkitから借りていない動作の1つは、ユーザーが数値以外の値をコピーして貼り付けると、onchangeイベントが発生してテキストボックスに値が表示されることです。私はコードを調べて、このonchangeが250msごとに呼び出されることに気付きました。これはパフォーマンスのヒットであるため、その部分についてコメントしました。
document.readyに以下のコードを追加します。
$('.class of text box').keyup(function ()
{
this.value = this.value.replace(/[^0-9]/g, '');
});
私のケースでは答えのどれもうまくいかなかったので、私はそれが 動的に 追加された要素のために働くように受け入れられた答えに少し変更を加えました。
楽しい ：
var inputFilter = function (elem, cb) {
/*
* /^-?\d*$/ restricts input to integer numbers
* /^\d*$/ restricts input to unsigned integer numbers
* /^[0-9a-f]*$/i restricts input to hexadecimal numbers
* /^-?\d*[.,]?\d*$/ restricts input to floating point numbers (allowing both . and , as decimal separator)
* /^-?\d*[.,]?\d{0,2}$/ restricts input to currency values (i.e. at most two decimal places)
*/
bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
if (cb(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);
}
});
};
使用法 ：
inputFilter('#onlyDigitsInput', function (val) {
return /^\d*$/.test(val);
});
Event.metaKeyも確認することをお勧めします。これがtrueに設定されている場合、ユーザーはcmd-Aのようにフィールド内のすべてのテキストを選択するようにしている可能性があります。あなたもそれを許すべきです。
$(document).on("keypress", ".classname", function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
});
私はコメントが嫌いなのでコメントを使わなくて済むように、受け入れられた答えをリファクタリングしました。またこれはjasmineでテストするのが簡単です。
allowBackspaceDeleteTabEscapeEnterPress: function(event){
return ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 190]) >= 0);
},
allowContorlAPress: function(event){
return (event.keyCode == 65 && event.ctrlKey === true)
},
allowHomeEndLeftRightPress: function(event){
return (event.keyCode >= 35 && event.keyCode <= 39)
},
theKeyPressedIsEditRelated: function (event) {
return (this.allowBackspaceDeleteTabEscapeEnterPress(event)
|| this.allowContorlAPress(event)
|| this.allowHomeEndLeftRightPress(event));
},
isNotFromTheNumKeyPad: function (event) {
return (event.keyCode < 96 || event.keyCode > 105);
},
isNotFromTopRowNumberKeys: function (event) {
return (event.keyCode < 48 || event.keyCode > 57);
},
theKeyIsNonNumeric: function (event) {
return (event.shiftKey
|| (this.isNotFromTopRowNumberKeys(event)
&& this.isNotFromTheNumKeyPad(event)));
},
bindInputValidator: function(){
$('.myinputclassselector').keydown(function (event) {
if(this.validateKeyPressEvent(event)) return false;
});
},
validateKeyPressEvent: function(event){
if(this.theKeyPressedIsEditRelated(event)){
return;
} else {
if (this.theKeyIsNonNumeric(event)) {
event.preventDefault();
}
}
}
これが、整数値または浮動小数点値に対する数値入力を検証するために使用するものです（jQueryによる目立たないスタイル）。
$('input[name="number"]').keyup(function(e) {
var float = parseFloat($(this).attr('data-float'));
/* 2 regexp for validating integer and float inputs *****
> integer_regexp : allow numbers, but do not allow leading zeros
> float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part
*************************************************************************/
var integer_regexp = (/[^0-9]|^0+(?!$)/g);
var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g);
var regexp = (float % 1 === 0) ? integer_regexp : float_regexp;
if (regexp.test(this.value)) {
this.value = this.value.replace(regexp, '');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-float="1" id="number" name="number" placeholder="integer">
<input type="text" data-float="0.1" id="number" name="number" placeholder="float">別のアプローチは以下の通りです。これも貼り付けの面倒を見るでしょう。 [英数字検証用]
//Input Validation
var existingLogDescription = "";
$('.logDescription').keydown(function (event) {
existingLogDescription = this.value;
});
$('.logDescription').keyup(function () {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
alert("Log Description should contain alpha-numeric values only");
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
this.value = existingLogDescription;
}
});
入力テキストにクラスを置き、それにonly_numbersという名前を付けます
ページにjqueryコードを配置する
$(document).ready(function() {
$('.only_numbers').keyup(function() {
var numbers = $(this).val();
$(this).val(numbers.replace(/\D/, ''));
});
});
楽しむ ：-）
この答え は完璧でしたが、 jQuery.Validationプラグイン と組み合わせることでより良く、より強力にすることさえできます。
number（）メソッド を使用すると、次のように開発できます。
$('.numberOnly').keydown(function (event) {
if ((!event.shiftKey && !event.ctrlKey && !event.altKey) &&
((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)))
// 0-9 or numpad 0-9, disallow shift, ctrl, and alt
{
// check textbox value now and tab over if necessary
}
else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37
&& event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109
&& event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190)
// not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190)
{
event.preventDefault();
}
// else the key should be handled normally
});
// _____________________________________________
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
// _____________________________________________
$(document).ready(function(){
$('#myFormId').validate({
rules: {
field: {
required: true,
number: true
}
}
});
});
そのため、 "numberOnly"クラスを持つ "#myFormId"フォームのすべてのテキストボックスは、10進数、浮動小数点数、さらには負数を含む数字のみを受け入れます。 Voila :)
PS：私の場合、何らかの理由で、私は.validate（）の代わりにjQuery.validator.addMethod（）を使用しました。
jQuery.validator.addMethod("numberOnly", function (value, element) {
var result = !isNaN(value);
return this.optional(element) || result;
}, jQuery.format("Please enter a valid number."));
（私のASP.NET MVC 3プロジェクト+控えめなJavaScript検証、hooooooooray！の中でうまく機能します。）
すべての答えを1つにまとめて、次のコードを思い付きました。
jQuery('#input_id', function(e){
// Allow: backspace, delete, tab, escape, enter
if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// Disallow several dots (allow 190 only if no dots found)
(e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
// Bug in some Android devices where it is always 229
(e.keyCode === 229) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
さらに、フォームはautocomplete="off"を持つべきです。このオプションがなければ、モバイル機器のオートコンプリートアルゴリズムに問題があるかもしれません。
小数点がすでに使用されているかどうかを確認します -
// Stop: Multiple decimal points
if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
e.preventDefault();
私はこの形で使っています。私には正しいようにキーを許可するようだ home、 end、 shift そして ctrl、ユーザーが特殊文字を印刷できるという欠点があります。
$("#busca_cep").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
if (event.keyCode == 13) {
localiza_cep(this.value);
}
} else {
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
ここでJava ScriptまたはjQueryを使用してそれを行うための非常に多くの良い答えがあります。
HTML5のみを使用してこれをアーカイブする非常に簡単な方法を追加します。
<input type="number" name="quantity" min="0" max="9">
Tetbox内の数字のみを許可するには、以下の単純なjQueryを使用してください。手動ですべての特殊文字をフィルタリングする必要はないので、特殊文字が欠落する危険性はありません。これは0から9までの数字のみを許可します。
//Event of data being keyed in to textbox with class="numericField".
$(".numericField").keyup(function() {
// Get the non Numeric char that was enetered
var nonNumericChars = $(this).val().replace(/[0-9]/g, '');
// Now set the value in text box
$(this).val( $(this).val().replace(nonNumericChars, ''));
});
$(document).ready(function()
{
$("#textBoxId").bind("change",checkInput);
});
function checkInput()
{
// check if $('#textBoxId').val() is under your constraints
// then change its value, removing the last character
// since this event will be called each time you
// type a character
}
これを試してください
$('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
function validate_profile(frmid) {
var form = $('#' + frmid);
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: true, // do not focus the last invalid input
ignore: "",
rules: {
contact_no: {
required: true,
minlength: 10,
maxlength: 10,
number: true
}, email_id: {
required: true,
email: true
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
Metronic.scrollTo(error, -7000);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // un set error class to the control group
$(element)
.closest('.form-group').removeClass('has-success'); // set success class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // un set error class to the control group
$(element)
.closest('.form-group').addClass('has-success'); // set success class to the control group
error.hide();
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.closest('.form-group').addClass('has-success');
},
submitHandler: function (form) {
success.show();
error.hide();
form.submit();
}
});
}
jQuery("#no_of").keypress(function(event){
//Allow only backspace and delete
if (event.keyCode != 46 && event.keyCode != 8) {
if (!parseInt(String.fromCharCode(event.which))) {
event.preventDefault();
}
}
});
jQuery("#no_of").keyup(function(e){
var temp_s= jQuery("#no_of").val();
var multiply_val= temp_s*10;
jQuery("#ex-r").html(multiply_val);
});