web-dev-qa-db-ja.com

<input type = "number">に小数点以下2桁を許可します

私は<input type="number">を持っています、そして私はユーザーの入力を純粋に数あるいは小数点以下2桁までの小数を持つ数に制限したいです。

基本的に、私は価格入力を求めています。

私は正規表現を避けたいと思いました。それをする方法はありますか？

<input type="number" required name="price" min="0" value="0" step="any">
htmlhtml5numbers
127
nubteens

小数点以下の桁数を任意に指定できるstep="any"の代わりに、小数点以下2桁まで指定できるstep=".01"を使用してください。

仕様の詳細： https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

198
Michael_B

ケース誰かがオプションの小数点以下2桁の数字だけを許可する正規表現を探しているなら

^\d*(\.\d{0,2})?$

一例として、私は以下の解決策がかなり信頼できるものであることを見出しました。

HTML：

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS/JQuery：

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});
22
Weston Ganger

通貨については、私はお勧めします：

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

http://jsfiddle.net/vx3axsk5/1/ を参照してください。

HTML5のプロパティ "step"、 "min"、および "pattern"は、フォームが送信されたときに検証され、onblurは実行されません。 stepがある場合はpatternは不要です。patternがある場合はstepは不要です。パターンはとにかくそれを検証するのでそれであなたは私のコードでstep="any"に戻ることができます。

あなたがonblurを検証したいならば、私はユーザーに視覚的な合図を与えることは背景を赤く着色することのように同じく役に立つと信じます。ユーザーのブラウザがtype="number"をサポートしていない場合は、type="text"にフォールバックします。ユーザーのブラウザがHTML5パターン検証をサポートしていない場合、私のJavaScriptスニペットはフォームの送信を妨げませんが、視覚的な手がかりを与えます。そのため、HTML5サポートが不十分な人々、およびJavaScriptを無効にしたりHTTP要求を偽造したりしてデータベースに侵入しようとする人々にとっては、とにかくもう一度サーバーで検証する必要があります。フロントエンドでの検証のポイントは、より良いユーザーエクスペリエンスのためです。そのため、ほとんどのユーザーが優れた経験を持っている限り、コードがまだ機能し、バックエンドで検証できるという条件で、HTML5の機能に頼っても問題ありません。

16
Ultimater

ステップ1： あなたのHTML番号入力ボックスをonchangeイベントにフックする

myHTMLNumberInput.onchange = setTwoNumberDecimal;

またはHTMLコードで

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

ステップ2：setTwoDecimalPlaceメソッドを書く

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

toFixed()メソッドに渡される値を変えることで、小数点以下の桁数を変えることができます。 MDNドキュメント を参照してください。

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer
12
Sachin Sudhakar Sonawane

入力タイプで2つの10進数のみを許可するためにこれを試してください

<input type="number" step="0.01" class="form-control"  />
6
Nilesh

私はjQueryを使用することが私の最良の解決策であると感じました。

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});
3
SamohtVII

最高のシンプルな方法はこれです✔️

 <input min="0" max="1" step=".10" type="number" value="0">
0
Varun Pradhan

このコードを使う

<input type="number" step="0.01" name="amount" placeholder="0.00">

デフォルトでは、HTML5入力要素のStep値はstep = "1"です。

0
Obaidul Haque