web-dev-qa-db-ja.com

<input type = number />にアルファベット文字を入力できないようにします

テキストボックスを用意する必要があります。内部に入力するときは常に数字[0-9]のみを許可する必要があります。 type="number"を使用しました。これはクライアント側の検証を確実に保持しますが、他のアルファベットを入力することもできます。各キーダウンを追跡して正規表現と照合することでそれを行うことができますが、HTMLタグのみを使用して入力を制限する方法があり、各キーダウンで比較するJavaScriptの関数を定義しないでください？

そうするのに十分ではないコードは次のとおりです。

    <input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">

どんな助けも大歓迎です。

javascripthtmlhtml5numbers
17
user79307

jquery.numeric プラグインを使用できます。

here 同様の質問を参照してください。

$(document).ready(function(){
   $(".numeric").numeric();
});
19
mihai.ciorobea

これを試して

javaScript関数を定義する

以下のように小数で許可された数の関数

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

    return true;
}

10進数ではなく数のみを許可する関数は以下のとおりです。

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

    return true;
}

HTML

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">
15
Sandip

モバイルデバイスで数値キーボードを取得するためのinput type = "number"

Javaスクリプト

function numbersonly(myfield, e)
        {
            var key;
            var keychar;

            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;

            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;

            // only one decimal point
            else if ((keychar == "."))
            {
                if (myfield.value.indexOf(keychar) > -1)
                    return false;
            }
            else
                return false;
        }

HTML

<input type="number" onkeypress="return numbersonly(this, event)"/>
3
mswyss

質問は2013年頃に投稿されたことがわかりました。とにかく、type = "number"はアルファベットと「e」以外の特殊文字を制限しています。 「e」および「。」としての「+」 1.2e + 12、 '。'のような指数の場合に考慮されます10進数と見なされます。

1
Monika Tiruchanur

入力ボックスをフォーム内に配置し、送信ボタンを使用する必要があります。フォームの検証は、フォームの送信時に行われます。こちらのデモをご覧ください： http://jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>
1
ds345

ブラウザの動作は異なります。 In Chrome=次のコード：

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
  <input type="submit">

onlyがフォーム内にあり、ユーザーが送信ボタンをクリックした後にのみ機能します。

1
Greg Neils

Javascriptを少し使用してもかまわない場合は、これが役立つかもしれません JS-BIN Demo ：

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>
1
Akhil Sekharan

これを試して：-

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });
1
user7409534

追加するだけ-min = "0" max = "9" onkeydown = "return false;"

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">

0
Ankush Naskar