396

現在、私は次のコードを持っています

<input type="number" />

このようなものに出てきます

ここに画像の説明を入力

右側の小さなセレクターは、数値を負にすることができます。どうすればそれを防ぐことができますか?

の使用に疑問type="number"があります。解決するよりも多くの問題を引き起こしています。とにかく健全性をチェックするつもりなので、使用に戻るべきtype="text"ですか?

4

21 に答える 21

88

それは、どれだけ正確になりたいかによって異なります。整数のみを受け入れたい場合は、次のようにします。

<input type="number" min="1" step="1">

たとえば、小数点以下2桁の浮動小数点数が必要な場合:

<input type="number" min="0.01" step="0.01">

于 2013-10-07T20:01:50.883 に答える
70

タグonkeypress内に追加することで、入力に正の整数のみを強制的に含めることができます。input

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

ここでevent.charCode >= 48は、0 以上の数値のみが返さminれることを保証しますが、タグは、入力バー内をスクロールすることで最小の 1 に到達できることを保証します。

于 2016-12-22T07:23:01.317 に答える
7

試す

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

于 2014-07-31T11:44:14.160 に答える
3

負の数値を入力しようとすると、onkeyup イベントがこれをブロックし、入力数値に矢印を使用すると、onblur イベントがその部分を解決します。

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

于 2020-04-10T12:33:54.520 に答える
0

このコードを入力タイプに追加します。

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

例えば：

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
于 2017-06-23T08:27:40.317 に答える
0

他の解決策は、Js を使用してそれを正にすることです (min オプションは無効にすることができ、ユーザーが smth を入力した場合は無効になります) 負の if は必要なく、on('keydown') イベントも使用できます!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});
于 2019-02-26T08:39:24.630 に答える
-1

type=number を使用すると、入力フィールドの矢印キーや上下キーでの値の変更などの問題に直面するため、数値の代わりに type text を使用するのが最適だと思います。

<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />
于 2021-09-28T07:41:15.473 に答える