テキストボックスの「数値」のみの入力を制限するための最善の方法は何ですか?
小数点が許されるものを探しています。
私はたくさんの例を見ます。しかし、どちらを使用するかをまだ決めていません。
Praveen Jeganathanからの更新
これ以上のプラグインではなく、jQueryはv1.7で追加された独自のjQuery.isNumeric()
を実装しました。参照してください: https://stackoverflow.com/a/20186188/66767
これには新しくて非常に簡単な解決策があります。
さまざまな数値フィルタを含む、テキスト
<input>
にany種類の入力フィルタを使用することができます。これは、コピー+貼り付け、ドラッグ+ドロップ、キーボードショートカット、コンテキストメニュー操作、入力不可能なキー、およびすべてを正しく処理します。キーボードのレイアウト.
この回答 を参照するか、自分で試してください on JSFiddle 。
私は jquery.numeric プラグインを使って多くのフォームをうまく実装しました。
$(document).ready(function(){
$(".numeric").numeric();
});
さらにこれはテキストエリアでも機能します。
ただし、Ctrl + A、コピー+貼り付け(コンテキストメニューを使用)、およびドラッグ+ドロップは期待どおりに機能しません)になります。
HTML 5規格のより広いサポートにより、数値のみの入力を制限するためにpattern
要素にnumber
属性とinput
型を使用できます。一部のブラウザ(特にGoogle Chrome)では、数字以外のコンテンツの貼り付けも制限するように機能します。 number
やその他の新しい入力型に関するより詳しい情報は here をご覧ください。
(検証とは対照的に)入力を制限したい場合は、重要なイベントを扱うことができます。このようなもの:
<input type="text" class="numbersOnly" value="" />
そして:
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
これにより、検証フェーズの後半ではなく、英字などを入力できないことがすぐにわかります。
入力はマウスでカットアンドペーストしたり、キーイベントをトリガーしない可能性があるフォームオートコンプリートによって入力されたりする可能性があるため、まだ検証する必要があります。
私は最良の答えはちょうどこれをするための上記のものであると思いました。
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
しかし、私は矢印キーと削除ボタンがカーソルを文字列の最後にスナップさせるのはちょっとした痛みであることに同意します(そしてそれがテストで私に蹴られたからです)。
簡単な変更で追加しました
$('.numbersOnly').keyup(function () {
if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
this.value = this.value.replace(/[^0-9\.]/g, '');
}
});
こうすれば、テキストが変更されないようなボタンのヒットがあってもそれを無視するだけです。これを使用すると、最後までジャンプせずに矢印を押して削除できますが、数字以外のテキストは消去されます。
Jquery.numericプラグインには作者に通知したいくつかのバグがあります。 SafariとOperaでは複数の小数点を使用できます。また、Operaではバックスペース、矢印キー、その他の制御文字を入力することはできません。私は正の整数入力が必要だったので、結局自分のものを書くだけになりました。
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
これ以上のプラグインではなく、 jQuery は独自の を実装しました。 jQuery.isNumeric() はv1で追加されました。 7。
jQuery.isNumeric( value )
引数が数値かどうかを調べます。
$.isNumeric( "-10" ); // true
$.isNumeric( 16 ); // true
$.isNumeric( 0xFF ); // true
$.isNumeric( "0xFF" ); // true
$.isNumeric( "8e5" ); // true (exponential notation string)
$.isNumeric( 3.1415 ); // true
$.isNumeric( +10 ); // true
$.isNumeric( 0144 ); // true (octal integer literal)
$.isNumeric( "" ); // false
$.isNumeric({}); // false (empty object)
$.isNumeric( NaN ); // false
$.isNumeric( null ); // false
$.isNumeric( true ); // false
$.isNumeric( Infinity ); // false
$.isNumeric( undefined ); // false
IsNumeric()をイベントリスナーと結び付ける方法の例を示します。
$(document).on('keyup', '.numeric-only', function(event) {
var v = this.value;
if($.isNumeric(v) === false) {
//chop off the last char entered
this.value = this.value.slice(0,-1);
}
});
上記のnumeric()プラグインはOperaでは動作しません(バックスペース、削除、あるいは戻るまたは進むキーを使用することはできません)。
以下のJQueryまたはJavascriptのコードは完全に機能します(そしてそれは2行のみです)。
JQuery:
$(document).ready(function() {
$('.key-numeric').keypress(function(e) {
var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
if (verified) {e.preventDefault();}
});
});
Javascript:
function isNumeric(e)
{
var keynum = (!window.event) ? e.which : e.keyCode;
return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}
もちろん、これは純粋な数値入力(プラスバックスペース、削除、前進/後退キー)専用ですが、ポイントやマイナス文字を含めるように簡単に変更できます。
このコードを試すだけで、数字入力制限のための長いコードは必要ありません。
有効なintとfloatの両方の値も受け入れます。
onload =function(){
var ele = document.querySelectorAll('.number-only')[0];
ele.onkeypress = function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
return false;
}
ele.onpaste = function(e){
e.preventDefault();
}
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
$(function(){
$('.number-only').keypress(function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
UPDATE
上記の答えは最も一般的なユースケース - 数値としての入力の検証 - に対するものです。
しかし、以下は特別な使用例のためのコードスニペットです。
$(function(){
$('.number-only').keyup(function(e) {
if(this.value!='-')
while(isNaN(this.value))
this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
.split('').reverse().join('');
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
下記は私が文字通りキーストロークをブロックするために使用しているものです。これは0から9までの数字と小数点のみを許可します。実装が簡単で、コードがそれほど多くなく、魅力的なように機能します。
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
return true;
}
}
</script>
<input value="" onkeypress="return isNumberKey(event)">
あなたはアルファベットが魔法のように見えたり消えたりするのを見下ろしてはいけません。これはマウスペーストでも機能します。
$('#txtInt').bind('input propertychange', function () {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
私は最初にjQueryを使ってこれを解決しようとしましたが、キー入力時に削除される直前に入力フィールドに実際に現れる不要な文字(数字以外)については嬉しくありませんでした。
私はこれを見つけた他の解決策を探しています:
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 ||
/\d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput"
onkeypress="return numbersOnly(this, event);"
onpaste="return false;" /></p>
</form>
ソース: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example 実際の例: http://jsfiddle.net/u8sZq/
小数点を1つ許可するには、次のようにします。
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
var s = String.fromCharCode(oKeyEvent.charCode);
var containsDecimalPoint = /\./.test(oToCheckField.value);
return oKeyEvent.charCode === 0 || /\d/.test(s) ||
/\./.test(s) && !containsDecimalPoint;
}
</script>
出典:ただこれを書いた。働いているようです。実例: http://jsfiddle.net/tjBsF/
あなたがすることに興味があるかもしれないいくつかのこと:
私はタイトルがjQueryソリューションを求めているのを知っています、しかしうまくいけば誰かがとにかくこれが役に立つと思うでしょう。
window.jQuery.fn.ForceNumericOnly =
function () {
return this.each(function () {
$(this).keydown(function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
});
};
そして、あなたが望むすべての入力にこれを適用してください:
$('selector').ForceNumericOnly();
投稿をありがとうDave Aaron Smith
私はあなたの答えを編集して、小数点と数字を数字の部分から受け入れます。この作品は私にぴったりです。
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section
(48 == event.which && $(this).attr("value")) || // No 0 first digit
(96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
2015年10月現在のCanIUseによると、HTML5はグローバルブラウザサポートで入力タイプ番号を88%以上サポートしています。
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
これはJQuery関連の解決策ではありませんが、利点は携帯電話のAndroidキーボードが数字を入力するために最適化されるということです。
あるいは、新しいパラメータ「パターン」を持つ入力タイプのテキストを使用することが可能です。 HTML5仕様書に詳細が記載されています。
私はそれがjqueryソリューションよりも優れていると思います、なぜならこの質問で提供されたjqueryソリューションは千の区切り文字をサポートしません。 html5を使えば.
JSFiddle: https://jsfiddle.net/p1ue8qxj/
この関数は同じことをします、上の考えのいくつかを使います。
$field.keyup(function(){
var val = $j(this).val();
if(isNaN(val)){
val = val.replace(/[^0-9\.]/g,'');
if(val.split('.').length>2) val =val.replace(/\.+$/,"");
}
$j(this).val(val);
});
/ *これは私のクロスブラウザ版の jQueryを使ってHTML入力ボックスに数字(0-9)だけを許可するには?
* /
$("#inputPrice").keydown(function(e){
var keyPressed;
if (!e) var e = window.event;
if (e.keyCode) keyPressed = e.keyCode;
else if (e.which) keyPressed = e.which;
var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
// Allow: Ctrl+A
(keyPressed == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(keyPressed >= 35 && keyPressed <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
e.preventDefault();
}
}
});
私はこれがこの問題を解決するための良い方法であると思います、そしてそれは非常に簡単です:
$(function() {
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
var regex = /^[0-9]+\.?[0-9]*$/;
if (this.value.length > 0 && !regex.test(this.value)) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
});
});
例:JSFiddle
シナリオカバー
ここで最もよく似た推奨事項はこれらのうちの少なくとも1つを失敗するか、またはこれらすべてのシナリオをカバーするために多くのコードを必要とします。
home
、end
、およびarrow
キーを許可します。delete
とbackspace
を使用できるようにします。keyup
イベントが使用されていないため、テキスト値は点滅しません。シナリオが失敗しました
0.5
から始めてゼロだけを削除するとうまくいきません。これは、正規表現を/^[0-9]*\.?[0-9]*$/
に変更し、テキストボックスが小数点で始まるときに0
を付加するブラーイベントを追加することで修正できます(必要に応じて)。これを修正する方法のより良いアイデアについては、 高度なシナリオ を参照してください。プラグイン
これを簡単にするために、この単純な jqueryプラグイン を作成しました。
$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);
ParseFloat()で内容を実行するだけです。無効な入力ではNaN
を返します。
あなたはdecorplanit.comから autoNumericを使うことができます 。彼らは、数値、通貨、四捨五入などをサポートしています。
私はいくつかのCSSの微調整で、IE6環境で使用しました、そしてそれは合理的な成功でした。
たとえば、cssクラスnumericInput
を定義し、それを使用してフィールドを数値入力マスクで装飾することができます。
autoNumeric Webサイトからのの適用:
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
これは、テキストフィールドの整数パーセント検証のために(Peter Mortensen/Keith Bentrupによるコードの一部を使用して)たった今行ったスニペットです(jQueryが必要です)。
/* This validates that the value of the text box corresponds
* to a percentage expressed as an integer between 1 and 100,
* otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
if (!isNaN(parseInt(this.value,10))) {
this.value = parseInt(this.value);
} else {
this.value = 0;
}
this.value = this.value.replace(/[^0-9]/g, '');
if (parseInt(this.value,10) > 100) {
this.value = 100;
return;
}
});
このコード:
私はこれが困っている人たちに役立つことを願っています。
HTML 5を使用している場合、検証を実行するためにそれほど長い時間を費やす必要はありません。ただ使う -
<input type="number" step="any" />
Step属性により、小数点を有効にすることができます。
最善の方法は、テキストボックスがフォーカスを失うたびにその内容を確認することです。
内容が「数字」かどうかは正規表現で確認できます。
あるいは、検証プラグインを使用することもできます。これは基本的にこれを自動的に行います。
データベースで使用するためにこの検索コードを確認してください。
function numonly(root){
>>var reet = root.value;
var arr1 = reet.length;
var ruut = reet.charAt(arr1-1);
>>>if (reet.length > 0){
var regex = /[0-9]|\./;
if (!ruut.match(regex)){
var reet = reet.slice(0, -1);
$(root).val(reet);
>>>>}
}
}
//Then use the even handler onkeyup='numonly(this)'
ここですばらしい解決策を見つけた http://ajax911.com/numbers-numeric-field-jquery/
私の要件に従って、 "keyup"を "keydown"に変更しました。
入力でキャレット位置を維持する他の方法は次のとおりです。
$(document).ready(function() {
$('.numbersOnly').on('input', function() {
var position = this.selectionStart - 1;
fixed = this.value.replace(/[^0-9\.]/g, ''); //remove all but number and .
if(fixed.charAt(0) === '.') //can't start with .
fixed = fixed.slice(1);
var pos = fixed.indexOf(".") + 1;
if(pos >= 0)
fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', ''); //avoid more than one .
if (this.value !== fixed) {
this.value = fixed;
this.selectionStart = position;
this.selectionEnd = position;
}
});
});
利点:
プランカー: デモ作業
これは非常に単純ですが、JavaScriptの組み込み関数「isNaN」がすでにあります。
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
このコードは私にはかなりうまくいきました。ピリオドを使用するには、controlKeys配列に46を追加しなければなりませんでした。
私はその機能を使用し、それはうまく機能します
$(document).ready(function () {
$("#txt_Price").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
//if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
私はJames Nelliの回答を使い、onpaste = "return false;"を追加しました。 (HåvardGeithus)整数のみが入力に入力されるようにします。貼り付けようとしても許可されません。
jquery.numeric プラグインは私にとってもうまくいきます。
私が嫌いなのは直感的なことだけです。キープレスはユーザーに何のフィードバックもなしに「許可されない」ようになります。
ブロックされた入力についての簡単なフィードバックを可能にするために、私 はプラグイン に2番目のコールバックを追加しました。
$('#someInput').numeric(
null, // default config
null, // no validation onblur callback
function(){
// for every blocked keypress:
$(this).effect("pulsate", { times:2 }, 100);
}
);
ほんの一例です(jQuery UIを使用)。もちろん。どんな単純な視覚的なフィードバックも助けになるでしょう。
Jquery Mask Plugin というニースのjqueryプラグインがあります。これはフォームフィールドとhtml要素にマスクを作成するように設計されていますが、どの種類を定義するためにも使用できますデータのフィールドは、フィールド内に入力できます。
$('.numeric-input').mask('0#');
今すぐあなたのフォームフィールド内で許可されるのは数字だけです。
キープレスイベントの使用
- 配列メソッド
var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
e.preventDefault();
});
- 直接法
$(".numbersOnly").keypress(function (e) {
if (e.which < 48 || 57 < e.which)
e.preventDefault();
});
もっと良いプラグインが見つかりました。あなたにもっとコントロールを与えます。数値が必要な場所に DOB フィールドがあるが、 "/"または " - "の文字も使用できるとします。
それは素晴らしい作品です!
http://itgroup.com.ph/alphanumeric/ でチェックしてください。
私はこれを使いましたが、良い結果が出ました。
ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
var charcode = (e.which) ? e.which : e.keyCode;
// for decimal point
if(!(charcode===190 || charcode===110))
{ // for numeric keys andcontrol keys
if (!((charcode>=33 && charcode<=57) ||
// for numpad numeric keys
(charcode>=96 && charcode<=105)
// for backspace
|| charcode==8))
{
alert("Sorry! Only numeric values allowed.");
$("#id").val(ini);
}
// to include decimal point if first one has been deleted.
if(charcode===8)
{
ini=ini.split("").reverse();
if(ini[0]==".")
a=0;
}
}
else
{
if(a==1)
{
alert("Sorry! Second decimal point not allowed.");
$("#id").val(ini);
}
a=1;
}
ini=$("#id").val();
});
find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
パターンを追加することで、テキスト入力に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]を使った解法については、ここで私の完全な答え をご覧ください
負の数も許可する
次のコードも負の数を受け入れます
HTML
<input type="text" name="myText" />
JS
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
}).on('blur', function(){
if(this.value == '-')
this.value = '';
});
私はこのコードを持っていますが、これは私にとって非常にうまく機能します。
var prevVal = '';
$(".numericValue").on("input", function (evt) {
var self = $(this);
if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
prevVal = self.val()
} else {
self.val(prevVal);
}
if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
evt.preventDefault();
}
});
このコードは、テキストボックス内のアルファベットを制限するためのもので、keypressイベントで検証するためのooly番号を入力する必要があります。
HTMLタグ:
<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />
function onlyNumbers(キー){
var keycode = (key.which) ? key.which : key.keyCode
if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {
return true;
}
else {
return false;
}
}