webdevqa.jp.net

HTMLテキスト入力は数値入力のみ可能

HTMLのテキスト入力(<input type=text />)を数字のキーストローク(プラス '。')のみを許可するように設定する簡単な方法はありますか?

698
Julius A

注:これは更新された回答です。以下のコメントは、キーコードを台無しにした古いバージョンに関するものです。

JavaScript

以下のsetInputFilter関数を使用すると、さまざまな数値フィルターを含むテキスト<input>any種類の入力フィルターを使用できます(以下)。

他のほとんどのソリューションとは異なり、このは正しくサポートしていますコピー+貼り付け、ドラッグ+ドロップ、すべてのキーボードショートカット、すべてのコンテキストメニュー操作、すべての入力不可能なキー(例:カーソルとナビゲーションキー)、キャレットの位置、すべての言語とプラットフォームのすべてのキーボードレイアウト、および IE 9以降のすべてのブラウザー

自分で試してみてください JSFiddleで

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\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サーバー側の検証を行うことに注意してください!

jQuery

このjQueryバージョンもあります。 この回答 を参照するか、自分で試してみてください JSFiddleで

HTML 5

HTML 5には<input type="number">specification を参照)を使用したネイティブソリューションがありますが、ブラウザーのサポートが異なることに注意してください。

  • ほとんどのブラウザは、フォームの送信時にのみ入力を検証し、入力時には検証しません。
  • ほとんどのモバイルブラウザstepmin、およびmax属性をサポートしていません。
  • Chrome(バージョン71.0.3578.98)では、ユーザーはフィールドにeおよびEの文字を入力できます。 この質問 も参照してください。
  • Firefox(バージョン64.0)およびEdge(EdgeHTMLバージョン17.17134)では、ユーザーがanyテキストをフィールドに入力できます。

自分で試してみてください w3schools.comで

1034
inspite

このDOMを使う

<input type='text' onkeypress='validate(event)' />

そしてこのスクリプト

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
247
geowa4

私はこれに対する良い答えを長くそして一生懸命探しました、そして、我々は必然的に<input type="number"を必要とします、しかしそれにもかかわらず、これらの2つは私が思い付くことができる最も簡潔な方法です:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

あなたが消去される前に一瞬の間表示されている受け入れられない文字が嫌いなら、以下の方法が私の解決策です。数多くの追加条件に注意してください。これはあらゆる種類のナビゲーションとホットキーを無効にするのを避けるためです。誰もがこれをコンパクトにする方法を知っているなら、私たちに知らせてください!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">
120
user235859

もう1つ例を挙げましょう。 

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

キー押下イベントにも添付

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

そしてHTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

これはjsFiddleの例です

53
Vasyl

HTML5には<input type=number>があります。現時点では、Operaのみがネイティブにサポートしていますが、 プロジェクト にJavaScript実装があります。

45
Ms2ger

これは10進数を1つだけ許可する単純なものですが、それ以上はありません。

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

42
billynoah

ここでのほとんどの答えはすべてキーイベントを使うことの弱点を持っています 。 

回答の多くは、キーボードマクロによるテキスト選択、コピー+貼り付けなどの望ましくない動作を制限するものです。他のものは特定のjQueryプラグインに依存しているように見えます。 

この単純な解決策は、入力メカニズム(キーストローク、コピー+貼り付け、右クリックコピー+貼り付け、音声合成など)に関係なく、クロスプラットフォームでは最適に機能するようです。すべてのテキスト選択キーボードマクロはまだ機能し、スクリプトによって数値以外の値を設定する機能も制限されます。

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
41
EJTH

私はここで述べた二つの答えの組み合わせを使うことを選んだ。

<input type="number" />

そして 

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

38
Mahendra Liya

HTML5は正規表現をサポートしているので、これを使うことができます。

<input id="numbersOnly" pattern="[0-9.]+" type="text">

警告:ブラウザによってはまだこれをサポートしていません。

30
james.garriss

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

さらに、コンマ、ピリオド、マイナス(、.-)を追加できます 

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >
16
patrick

2つの解決策:

フォームバリデータを使う(例えば jQuery検証プラグイン と共に)

正規表現を使用して、入力フィールドのonblur(つまり、ユーザーがフィールドを離れる)イベント中にチェックを行います。

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>
15
Romain Linsolas

とても簡単....

// JavaScript関数内(HTMLまたはPHPを使用可能)。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

あなたのフォーム入力で:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

最大入力あり(上記の12桁の数字が可能です)

14
Rizal Aditya

下記の解決策を見つけてください。このユーザではnumeric値のみを入力することができます。また、ユーザは入力でcopypastedragおよびdropを入力することはできません。 

使用できる文字

0,1,2,3,4,5,6,7,8,9

禁止されているキャラクターやキャラクター、イベントを通じて

  • アルファベット値
  • 特殊文字
  • コピー
  • 貼り付け
  • ドラッグ
  • ドロップ

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

うまくいかないか教えてください。

12

より安全な方法は、キープレスをハイジャックしてkeyCodeをフィルタリングしようとする代わりに、入力値をチェックすることです。

この方法では、ユーザーはキーボードの矢印、修飾キー、バックスペース、削除、標準以外のキーボードの使用、マウスによる貼り付け、テキストのドラッグアンドドロップ、さらにはユーザー補助入力を使用することができます。

以下のスクリプトは正数と負数を許可します

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

編集:私はそれが今時代遅れだと思うので私は私の古い答えを削除しました。

12
Vitim.us

これにはpatternを使うことができます。

<input id="numbers" pattern="[0-9.]+" type="number">

ここであなたは完全な携帯サイトのインターフェースのヒントを見ることができます

10

英数字の間でデバイス(携帯電話など)に提案したい場合は、<input type="number">を使用できます。

8
Steven

JavaScriptコード

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTMLコード

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

バックスペースキーコードは8であり、正規表現では許可されていないため、完全に動作します。したがって、バグを回避する簡単な方法です。

8
AirWolf

Event.keyCodeやevent.whichを見るのではなく、jQueryとreplace()を使った短くて素朴な実装です。

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

入力された文字が一時的に表示され、CTRL/CMD + Aが少しおかしいように見えるという小さな副作用だけがあります。

8
Tarmo

input type="number"はHTML5の属性です。

それ以外の場合は、これが役立ちます。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
7
Vaishali Tekale

JQueryを使った他の変種 

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});
7
Shurok

もう1つの例では、can入力フィールドに数字だけを追加し、できない letters

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
6
Mile Mijatovic
<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>
5
Voidcode

次のように、入力値(デフォルトでは文字列として扱われる)とそれ自体が数値として強制される値を比較することもできます。 

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

しかし、それをキーアップなどのイベントにバインドする必要があります。

5
cincplug

type = "number" を使用するだけでほとんどのブラウザでこの属性をサポート

<input type="number" maxlength="3" ng-bind="first">
5
saigopi

このDOMを使用してください。

<input type = "text" onkeydown = "validate(event)"/>

そしてこのスクリプト:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...またはこのスクリプトで、indexOfなしで、2つのforを使用.

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Onkeydown属性はonkeypress属性の前にチェックされるため、onkeypress属性の代わりにonkeydown属性を使用しました。問題はGoogle Chromeブラウザにあります。

属性 "onkeypress"を指定すると、Google ChromeではTABは "preventDefault"を指定して制御できなくなりますが、属性 "onkeydown"を指定するとTABは制御可能になります。

TABのASCIIコード=> 9

最初のスクリプトは2番目のスクリプトよりもコードが少なくなりますが、ASCII文字の配列にはすべてのキーが必要です。

2番目のスクリプトは最初のスクリプトよりもはるかに大きいですが、配列にすべてのキーが必要というわけではありません。配列の各位置の最初の桁は、各位置が読み取られる回数です。読み取りごとに、次のものに1ずつ増加します。例えば:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




数字キーの場合、10(0 - 9)しかありませんが、それらが100万の場合、これらすべてのキーで配列を作成するのは意味がありません。

ASCIIコード

  • 8 ==>(バックスペース);
  • 46 =>(削除)。
  • 37 =(左矢印)。
  • 39 =>(右矢印)。
  • 48 - 57 =>(数);
  • 36 =>(家);
  • 35 =>(終了)。
4
Daniel

これは改良された機能です。

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}
4
Ehsan Chavoshi

最良の方法(すべてのタイプの数値を許可する-負の実数、正の実数、負の整数、正の整数):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 
4
koolo90

これは geowa4のソリューション の拡張版です。 minおよびmax属性をサポートします。数値が範囲外の場合は、前の値が表示されます。

ここでテストできます。

使用法:<input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

入力が動的な場合はこれを使います。

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});
3
user669677

もしあなたがプラグインを使っても大丈夫なら、これが私がテストしたものです。貼り付け以外はうまくいきます。

数値入力

これはデモです http://jsfiddle.net/152sumxu/2

以下のコード(Libをインラインで貼り付け)

<div id="plugInDemo" class="vMarginLarge">
    <h4>Demo of the plug-in    </h4>
    <div id="demoFields" class="marginSmall">
        <div class="vMarginSmall">
            <div>Any Number</div>
            <div>
                <input type="text" id="anyNumber" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com
    (function(b) {
        var c = { allowFloat: false, allowNegative: false};
        b.fn.numericInput = function(e) {
            var f = b.extend({}, c, e);
            var d = f.allowFloat;
            var g = f.allowNegative;
            this.keypress(function(j) {
                var i = j.which;
                var h = b(this).val();
                if (i>0 && (i<48 || i>57)) {
                    if (d == true && i == 46) {
                        if (g == true && a(this) == 0 && h.charAt(0) == "-") {
                            return false
                        }
                        if (h.match(/[.]/)) {
                            return false
                        }
                    }
                    else {
                        if (g == true && i == 45) {
                            if (h.charAt(0) == "-") {
                                return false
                            }
                            if (a(this) != 0) {
                                return false
                            }
                        }
                        else {
                            if (i == 8) {
                                return true
                            }
                            else {
                                return false
                            }
                        }
                    }
                }
                else {
                    if (i>0 && (i >= 48 && i <= 57)) {
                        if (g == true && h.charAt(0) == "-" && a(this) == 0) {
                            return false
                        }
                    }
                }
            });
            return this
        };
        function a(d) {
            if (d.selectionStart) {
                return d.selectionStart
            }
            else {
                if (document.selection) {
                    d.focus();
                    var f = document.selection.createRange();
                    if (f == null) {
                        return 0
                    }
                    var e = d.createTextRange(), g = e.duplicate();
                    e.moveToBookmark(f.getBookmark());
                    g.setEndPoint("EndToStart", e);
                    return g.text.length
                }
            }
            return 0
        }
    }(jQuery));

    $(function() {
       $("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });
    });
</script>
2
Faiz

この問題を解決する簡単な方法は、テキストボックスに入力した文字を正規表現で検証するjQuery関数を実装することです。

あなたのHTMLコード:

<input class="integerInput" type="text">

そしてjQueryを使ったjs関数

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

2
AleKennedy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>

<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

return true;

}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>
2
aravind3

これに対する別の(単純な)回避策があるかもしれません….

String.fromCharCode(key)はAZERTYキーボードで奇妙なことを返すので(数字キーパッドは1の場合はg、&文字の場合は1としてコードを返す)。

任意の値にリセットするために入力の中でkeyupの最終的な値を捉えることは、より簡単で、軽量で、そしてバグのない方法であることに気づいた。他のCtrl、Home、Del、およびEnterイベントをフィルタする必要があります。

Jqを使った使い方:

<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>

Onkeyup属性:

<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>
2
Jack

つかいます:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

キーを押した後に値を更新したい場合は、 onChange onKeypress onKeyDown または onKeyup に変更できます。 しかしイベントonKeypressはどのブラウザでも動作していません。

2

これは簡単な解決策です

.price-input input.quantityをあなたの入力フィールドのクラスに置き換えます

$(".price-input input.quantity").on("keypress keyup blur",function (event) {    
       $(this).val($(this).val().replace(/[^\d].+/, ""));
        if ((event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    });
2

これが私が使うのが好きな素敵な簡単な解決策です:

function numeric_only (event, input) {
    if ((event.which < 32) || (event.which > 126)) return true; 
    return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));
}// numeric_only;

<input type="text" onkeypress="return numeric_only (event, this);" />

説明:

"event.which"を使う - まずそれが印刷可能な文字かどうかを判断する。そうでない場合はそれを許可します(削除やバックスペースなどのために)。それ以外の場合は、文字を文字列の末尾に連結し、jQueryの「isNumeric」関数を使用してテストします。これにより、個々のキャラクターのテストからすべての面倒な作業を省き、カット/ペーストのシナリオにも役立ちます。

あなたが本当に可愛くなりたいなら、あなたは新しいHTML入力タイプを作成することができます。タグを持つことができるように、それを "numeric"と呼びましょう。

<input type="numeric" />

数字のみが許可されます。次の "document.ready"コマンドを追加するだけです。

$(document).ready (function () {
    $("input[type=numeric]").keypress (function (event) {
        if ((event.which < 32) || (event.which > 126)) return true; 
        return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));
    });// numeric.keypress;
});// document.ready;

HTMLは、あなたがどんなタイプ名を使うかを気にしません - それがそれを認識しないなら、それはデフォルトでテキストボックスを使うでしょう、それであなたはこれをすることができます。あなたの編集者は文句を言うかもしれませんが、ちょっと、それがその問題です。間違いなく、ピューリタンがおかしくなるでしょう、しかしそれはうまくいきます、簡単で、そして今のところそれは私にとってかなり頑強でした。

2
rexthestrange

キーダウンイベントにアタッチしてから、必要なものに応じてキーをフィルタ処理できます。

<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);"  type="text">

そして実際のJavaScriptハンドラは次のようになります。

function validateNUM(e,field)
{
    var key = getKeyEvent(e)
    if (specialKey(key)) return true;
    if ((key >= 48 && key <= 57) || (key == 46)){
        if (key != 46)
            return true;
        else{
            if (field.value.search(/\./) == -1 && field.value.length > 0)
                return true;
            else
                return false;
        }
    }

function getKeyEvent(e){
    var keynum
    var keychar
    var numcheck
    if(window.event) // IE
        keynum = e.keyCode
    else if(e.which) // Netscape/Firefox/Opera
        keynum = e.which
    return keynum;
}
2
Alex Shnayder

入力フィールドにクラス(<input class="digit" ...>)を付けて、以下のようにjqueryを使います。

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

上記のコードはCtrl+Vストロークとright clickストロークの特殊文字も無効にするように働きます。

2
Prasanna Kumar

地域の違い(ユーロはアメリカ人とは逆の意味でピリオドとカンマを使用)、マイナス記号(またはマイナス記号を示すために括弧で数字を囲むという慣例)、および指数表記(私はそれに近づいています)を覚えておいてください。

2
MusiGenesis

Shurok関数を次のものに置き換えることができます。

$(".numeric").keypress(function() {
    return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});
2
KapitanX

より良いユーザーエクスペリエンスのための私の解決策:

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の結果に対して)

2
mencargo

以下のコードは _ paste _ / eventもチェックします。
" ruleSetArr_4 "のコメントを外し、 " ruleSetArr "に/( - )を追加して _ float _ numberを許可します。
簡単なコピー/貼り付け機能。あなたのinput要素をパラメータにしてそれを呼び出します。
例:inputIntTypeOnly($('input[name="inputName"]'))

function inputIntTypeOnly(Elm){
    Elm.on("keydown",function(event){
        var e = event || window.event,
            key = e.keyCode || e.which,
            ruleSetArr_1 = [8,9,46], // backspace,tab,delete
            ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57],	// top keyboard num keys
            ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
            ruleSetArr_4 = [17,67,86],	// Ctrl & V
          //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
            ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);	// merge arrays of keys
		
            if(ruleSetArr.indexOf() !== "undefined"){	// check if browser supports indexOf() : IE8 and earlier
                var retRes = ruleSetArr.indexOf(key);
            } else { 
                var retRes = $.inArray(key,ruleSetArr);
            };
            if(retRes == -1){	// if returned key not found in array, return false
                return false;
            } else if(key == 67 || key == 86){	// account for paste events
                event.stopPropagation();
            };

    }).on('paste',function(event){
        var $thisObj = $(this),
            origVal = $thisObj.val(),	// orig value
            newVal = event.originalEvent.clipboardData.getData('Text');	// paste clipboard value
        if(newVal.replace(/\D+/g, '') == ""){	// if paste value is not a number, insert orig value and ret false
            $thisObj.val(origVal);
            return false;
        } else {
            $thisObj.val(newVal.replace(/\D+/g, ''));
            return false;
        };
		
    });
};

var inptElm = $('input[name="inputName"]');

inputIntTypeOnly(inptElm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="inputName" value="1">

2
crashtestxxx

NuGet からダウンロードできるjquery.inputmask.jsライブラリを使います。

入力要素にクラスを与えます。この場合はregです。

<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

そしてJavaScriptで私はマスクを設定しました:

var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

これは数字専用ですが、正規表現を変更して「。」を受け入れることができます。

これを使用することによって、数字ではない文字を入力することは不可能です。一般的なフォーマットのためにこれらの入力マスクライブラリを持つことは有用です。

2
arame3333

JQueryを使ったもう1つの簡単な方法:

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

以下のように、それぞれの入力クラスをNumericに設定します。

<input type="text" id="inp2" name="inp2" class='Numeric' />
1
Ali Mahami

one-liners のようなあなたのそれらのために。

string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

私はこのコードをinput type = "text"に使い、AngularJSを使ってキーを押すとアクティブにしますが、必要ならjQueryを使うことができます。このコードを、何らかの方法でキーを押すとアクティブになる関数に入れるだけです。

数字、数字+小数、数字+小数+数字のみが許可されます。

_ code _

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";

testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";

testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";

testFour = "622632463.23464236326324363"
=> "622632463.23";

これは米国通貨用に作成されましたが、次のように小数点以下第1位を超える小数点以下2桁までを許可するように変更できます。

変更コード

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');

testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";

:)

1
SoEzPz
function digitsOnly(obj) {
   obj.value = obj.value.replace(/\D/g, "");
}

そして要素の中で

<input type="text" onkeyup="digitsOnly(this);" />
1
kombi

はい、HTML5はそうです。このコードを試してください( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>
1
Gagan Gami

これは悪い文字を即座に取り除き、1つのドットだけを許し、短く、そしてバックスペースを許します。

$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
1
wezten

私はいくつかの素晴らしい答えを見ましたが、私はそれらを可能な限り小さく単純なものにしたいので、誰かがそれから利益を得るでしょう。私はこのようにjavascriptのNumber()isNaN機能を使います。

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

お役に立てれば。

1
Sicha

少し調整しましたが、JavaScriptの奇妙なやり方に準拠するには、さらに多くの作業が必要です。

function validateNumber(myEvent,decimal) {
    var e = myEvent || window.event;
    var key = e.keyCode || e.which;

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

そしてそれは次のように呼ばれます:

$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});
1
Phillip Senn

私がここで醜い棒で死んだ馬を打っていないことを願っていますが、私は私のウェブサイトの量の入力にこれを使用しています、それは1から99までの数字しか許さない.

試してみてください。 https://jsfiddle.net/83va5sb9/ /

      <input min="1" type="text" id="quantity" name="quantity" value="1"
      onKeyUp="numbersonly()">

      <script>
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr = ""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr == "") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

    </script>
0
Chris Martin

このような状況では、正規表現とmatch関数がうまく機能します。たとえば、グラフ上の座標として機能する4つの入力ボックスを検証するために次のように使用しました。それは適度にうまくいきます。

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}
0
user3005331

'' 'onkeydown' ''イベントを使用して、許可されているキーの1つではない場合はイベント(event.preventDefaultまたはそのようなもの)をキャンセルしてください。

0
mbillard

何を検証する準備ができたらこの関数を呼び出します。ここでテキストボックスを使いました

私のHTMLでは:

<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

私のJavaScriptコードでは:

function check(num){
    var onlynumbers = true
    for (var i = 0; i < (num.length - 1); i++) {
        if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
            alert("please make sure that only numbers have been entered in the Quantaty box");
            onlynumbers = false
        }
    }
    if (onlynumbers == true) {

        //Execute Code
    }
}
0
Baladash

これは非推奨のkeyCodewhichを使わず、非入力キーをブロックせず、そして純粋なjavascriptを使う、とても短い解決策です。 (Chromium 70.0.3533、Firefox 62.0、およびEdge 42.17134.1.0でテスト済み)

HTML:

<input type="text" onkeypress="validate(event)">

JS:

function validate(ev) {
    if (!ev) {
        ev = window.event;
    }

    if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {
        return ev.preventDefault();
    }
}
0
Prime_Aqasix

数字の入力をブロックする方法を探していたのですが、答えが見つからないので、このコードは問題なく動作しました。

Onkeypressイベントに入力するだけです。

あなただけの数字の入力をブロックする必要がある場合、私はこれがうまくいくと思います。

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
0
Edson Cezar

私は古い記事を知っていますが、これは誰かに役立つと思いました。最近、テキストボックスを小数点以下5桁までに制限する必要がありました。私の場合もユーザーの入力は0.1未満でなければなりませんでした

<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

これがdoCheck関数です。

function doCheck(id,evt)
{
    var temp=parseFloat($(id).val());

    if (isNaN(temp))
        temp='0.0';
    if (temp==0)
        temp='0.0';

    $(id).val(temp);
}

整数入力を強制することを除いて、これは同じ関数です。

function doCheck(id,evt)
{
    var temp=parseInt($(id).val());

    if (isNaN(temp))
        temp='0';

    $(id).val(temp);
}

誰かに役立つことを願っています

0
ladieu

私はこの機能を使い終えました:

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) return false;"

これはIEやChromeでうまく機能します。Firefoxでもうまく機能しない理由はよくわかりません。Firefoxのタブキーをブロックする機能です。

Firefoxでタブキーがうまく動作するようにこれを追加します。

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
0
Edson Cezar

それが愚かなUXになると、人は常に「ユーザーの知性」の基準点を守るように努めるべきです。

数字以外のすべてを無視すると、ドットとハイフンは完璧な選択のように思えますが、 任意のコンテンツを入力し、完了したら入力を浄化することも検討する必要があります。有効な数値でない場合は、error を表示します。この方法では、ユーザーが何をしようとしても、結果は常に有効になります。ユーザーが警告やエラーメッセージを理解できないほど素朴な場合は、ボタンを押しても何も起こらないことを確認しても(キーコードの比較のように)混乱するだけです。

また、フォームの場合、検証とエラーメッセージの表示はほとんど必要です。それで、規定はすでにそこにあるかもしれません。これがアルゴリズムです。

  1. フォーカスを失った場合、またはフォームを送信した場合は、次のようにしてください。

    1.1。入力からコンテンツを読み取り、結果にparseFloatを適用します

    1.2。結果がアクセス不可番号(NaN)の場合は、入力フィールドをリセットし、 エラーメッセージ :をポップアップ表示します。有効な番号を入力してください:たとえば235または-654または321.526または-6352.646584 "。

    1.3。そうでなく、String(result)!==(入力内容)の場合、フィールドの値をresultに変更し、show warning message :を入力してください。入力した値は変更されています。有効な数値を入力してください(例:235または -654または321.526または-6352.646584 ")。未確認の値を許可できないフィールドの場合は、この条件をステップ1.2に追加することができます。

    1.4。そうでなければ、何もしません。

この方法では、 最小値、最大値、小数点以下などに基づいて検証を実行するという追加の利点も得られます。必要に応じて ステップ1.2の後の結果に対してこれらの操作を実行するだけです。

デメリット:

  1. 入力によって、フォーカスが失われるかフォームが送信されるまで、ユーザーは任意の値を入力できます。しかし、分野を埋めることに関する指示が十分に明確であるならば、ケースの90%で、これは出ないかもしれません。

  2. ステップ1.3を使用して警告を表示すると、ユーザーには見落とされ、意図しない入力が行われる可能性があります。エラーを投げたり警告を適切に表示することでこれを解決できます。

  3. 速度。これはregexメソッドよりもマイクロ秒単位で遅くなるかもしれません。

利点: ユーザーが読み、理解するための基本的な知識を持っていると仮定します。

  1. オプションで高度にカスタマイズ可能.

  2. ブラウザ間で言語に依存しないで動作します。

  3. エラーや警告を表示するためにフォームですでに利用可能な機能を利用します。

0
BlackPanther

これはペルシャ語とアラビア語の番号に対しても働きます:)

 setNumericInput: function (event) {
          var key = window.event ? event.keyCode : event.which
          if (event.keyCode === 8 ||
        (key >= 48 && key <= 57) ||
        (key >= 1776 && key <= 1785)) {
            return true
          } else {
            event.preventDefault()
          }
        }
0
hamid keyhani