テキストボックスの「数字」のみの入力を制限する最良の方法は何ですか?
小数点が使えるものを探しています。
多くの例を目にします。しかし、どちらを使用するかはまだ決めていません。
Praveen Jeganathan からの更新
jQuery.isNumeric()
プラグインはもうありません。jQuery は v1.7 で追加された独自の機能を実装しています。参照: https://stackoverflow.com/a/20186188/66767
テキストボックスの「数字」のみの入力を制限する最良の方法は何ですか?
小数点が使えるものを探しています。
多くの例を目にします。しかし、どちらを使用するかはまだ決めていません。
Praveen Jeganathan からの更新
jQuery.isNumeric()
プラグインはもうありません。jQuery は v1.7 で追加された独自の機能を実装しています。参照: https://stackoverflow.com/a/20186188/66767
(検証ではなく)入力を制限する場合は、主要なイベントを操作できます。このようなもの:
<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は v1.7 で追加された独自の jQuery.isNumeric() を実装しています。
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]/));
}
もちろん、これは純粋な数値入力 (およびバックスペース、削除、進む/戻るキー) のみですが、ポイントやマイナス文字を含むように簡単に変更できます。
number()メソッド でValidation プラグインを使用できます。
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
以下は、文字通りキーストロークをブロックするために使用するものです。これは、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)">
この提案のわずかな改善として、 Validation プラグインをnumber()、digits、およびrangeメソッドとともに使用できます。たとえば、次の例では、0 から 50 までの正の整数を取得できます。
$("#myform").validate({
rules: {
field: {
required: true,
number: true,
digits: true,
range : [0, 50]
}
}
});
キーを押したときにアルファベットが魔法のように現れたり消えたりすることはありません。これはマウスペーストでも機能します。
$('#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ソリューションを求めていることは知っていますが、とにかく誰かがこれが役立つことを願っています.
デイブ・アーロン・スミスの投稿をありがとう
数値セクションからの小数点と数値を受け入れるように回答を編集しました。この作品は私にぴったりです。
$(".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();
}
});
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();
この関数は同じことを行い、上記のアイデアのいくつかを使用します。
$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();
}
}
});
HTML5 は、2015 年 10 月の時点で CanIUse によると、グローバル ブラウザー サポートで 88% 以上の入力型番号をサポートしています。
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
これは JQuery 関連のソリューションではありませんが、携帯電話では Android キーボードが数字の入力に最適化されるという利点があります。
または、入力タイプのテキストを新しいパラメーター「パターン」で使用することもできます。HTML5仕様の詳細。
この質問で提供されたjqueryソリューションは3桁区切りをサポートしていないため、jqueryソリューションよりも優れていると思います。html5が使えるなら
JSFiddle: https://jsfiddle.net/p1ue8qxj/
parseFloat()を介してコンテンツを実行するだけです。NaN
無効な入力で返されます。
decorplanit.com から autoNumericを使用できます。数値だけでなく、通貨、丸めなどもサポートしています。
私は IE6 環境で使用しましたが、css の調整はほとんどありませんでしたが、妥当な成功でした。
たとえば、css クラスnumericInput
を定義して、フィールドを数値入力マスクで装飾するために使用できます。
autoNumeric Web サイトからの適合:
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
HTML5 を使用している場合は、検証を実行するために多大な時間を費やす必要はありません。使うだけ -
<input type="number" step="any" />
step 属性により、小数点を有効にすることができます。
ここで素晴らしい解決策を見つけましたhttp://ajax911.com/numbers-numeric-field-jquery/
要件に応じて「keyup」を「keydown」に変更しました
これは、テキストフィールドの整数パーセント検証のために私が行ったばかりのスニペットです (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;
}
});
このコード:
これが困っている人に役立つことを願っています。
最善の方法は、テキスト ボックスがフォーカスを失ったときにテキスト ボックスの内容を確認することです。
内容が「数値」かどうかは正規表現で確認できます。
または、基本的にこれを自動的に行う Validation プラグインを使用することもできます。
入力のキャレット位置を維持する他の方法:
$(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;
}
});
});
利点:
プランカー:デモ作業中
データベースの使用については、次の検索コードを確認してください。
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)'
さらに優れたプラグインを見つけました。より多くのコントロールを提供します。数値である必要があるが、「/」または「-」文字も受け入れるDOBフィールドがあるとします。
それはうまくいきます!
http://itgroup.com.ph/alphanumeric/で確認してください。
James Nelli の回答を使用し、onpaste="return false;" を追加しました。(Håvard Geithus) は、整数のみが入力に入力されるようにします。貼り付けようとしても、それは許可されません。
私はその機能を使用し、正常に動作します
$(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;
}
});
});
$(".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を追加する必要がありましたが、これが最善の方法だとは思いません;)
これは非常に簡単で、JavaScript 組み込み関数「isNaN」が既に存在します。
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
フォーム フィールドと html 要素にマスクを作成するように設計されたJquery Mask Pluginと呼ばれる優れた jquery プラグイン がありますが、それを使用して、フィールド内に入力できるデータの種類を単純に定義することもできます。
$('.numeric-input').mask('0#');
これで、フォーム フィールド内では数字のみが許可されます。
私はこれを使用しましたが、良い結果が得られました..
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 タグ:
<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />
関数のみNumbers(key) {
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;
}
}
I have this piece of code that does the job very well for me.
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();
}
});
スクリプトの最後に次を追加してください。
if(this.value.length == 1 && this.value == 0)
this.value = "";