(0,1,2,3,4,5 ... 9)0-9のような数字のみを許可するテキスト入力フィールドがあるWebページを作成しています。
jQueryを使用してこれを行うにはどうすればよいですか?
(0,1,2,3,4,5 ... 9)0-9のような数字のみを許可するテキスト入力フィールドがあるWebページを作成しています。
jQueryを使用してこれを行うにはどうすればよいですか?
回答:
注:これは更新された回答です。以下のコメントは、キーコードをいじった古いバージョンを参照しています。
これにはネイティブのjQuery実装はありませんが<input>
、次のinputFilter
プラグインを使用してテキストの入力値をフィルターできます(コピー+貼り付け、ドラッグ+ドロップ、キーボードショートカット、コンテキストメニューの操作、型指定できないキー、キャレットの位置などをサポートしています)キーボードレイアウト、およびIE 9以降のすべてのブラウザー):
// Restricts input for the set of matched elements to the given inputFilter function.
(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);
} else {
this.value = "";
}
});
};
}(jQuery));
これで、inputFilter
プラグインを使用して入力フィルターをインストールできます。
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
その他の入力フィルターの例については、JSFiddleデモを参照してください。また、サーバー側の検証を行う必要があることにも注意してください。
jQueryは実際には必要ありません。純粋なJavaScriptでも同じことができます。この回答を参照してください。
HTML 5には<input type="number">
(仕様を参照)のネイティブソリューションがありますが、ブラウザのサポートはさまざまです。
step
、min
およびmax
属性をサポートしていません。e
し、E
フィールドに。こちらの質問もご覧ください。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();
return this.each(function()
ですか?
each
from return this.each(function()
はHaggleLadが言ったように複数のオブジェクトを許可することであり、return
パートは次のようなチェーンを許可するためにjQueryオブジェクトを呼び出し元に返すことです$("input[type='text'").ForceNumericOnly().show()
列をなして:
<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">
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
。
/[^0-9]|^0+(?!$)/g
ゼロの先行系列を防止するように変更できます。
単純な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,'');
});
しかし、このコード特権は何ですか?
decimal
間0.0
に24.0
、私はそれを入力してみましょうすることができません.
this.value = Number(this.value.replace(/\D/g, ''));
短くて甘い-これは30以上の答えの後はあまり注目されないかもしれません;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
if (isNaN($('#inputid').val()))
if(isNaN(document.getElementById( 'inputid')。val()))
if (isNaN(document.getElementById('inputid').value))
更新: そして、ここでそれについて話しているがjQueryを使用している素晴らしい記事:HTMLテキストボックスの入力を数値に制限する
document.getElementById('inputid').val()
男..それはまだjqueryです。.val()
jqueryのものです。使用.value
decimal
間0.0
に24.0
、私はそれを入力してみましょうすることができません.
$(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,'');
});
this.value.replace(/[^0-9\.]/g,'');
OPの要件0〜9を含めるために使用することを確認する必要があります
なぜそんなに複雑なのですか?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" />
私はと呼ばこのリンク解決のために。それは完全に動作します!!!
decimal
間0.0
に24.0
、私はそれを入力してみましょうすることができません.
HTML5のpattern属性は、要素の値がチェックされる正規表現を指定します。
<input type="text" pattern="[0-9]{1,3}" value="" />
注:pattern属性は、テキスト、検索、URL、電話、電子メール、およびパスワードの入力タイプで機能します。
[0-9]は任意の正規表現条件で置き換えることができます。
{1,3}最小1を表し、最大3桁を入力できます。
decimal
間0.0
に24.0
、私はそれを入力してみましょうすることができません.
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)');
function 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
}
}
decimal
間0.0
に24.0
、私はそれを入力してみましょうすることができません.
他のソリューションのように、ユーザーがテキストを選択したり、貼り付けたりすることを妨げない、非常に優れたシンプルなソリューションを見つけました。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 ;
})
if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
私は上記の@ 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;
}
});
});
これは、少し前に作成した簡単なソリューションです。あなたは私の記事でそれについてもっと読むことができます:
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);
});
あなたはタブを許可したいでしょう:
$("#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();
}
}
});
jQuery UIウィジェットファクトリを使用する答えは次のとおりです。許可する文字を簡単にカスタマイズできます。
$('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;
}
});
これは壊れないようです。
// 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));
});
テンキーとタブキーも機能していることを確認する必要があります
// 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();
}
}
私は少し手伝いたかった、そして私は自分のバージョン、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タグ "... input ... id =" price "onkeydown =" return onlyNumbers(event) "..."を追加するだけで完了です;)
私も答えたいです:)
$('.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);
});
それだけです...ただの数字です。:)ほとんど「ぼかし」だけで機能しますが...
入力値が数値であることを確認する簡単な方法は次のとおりです。
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
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をご覧ください。