<input type =“ number”>に小数点以下2桁を許可

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

基本的に、価格の入力をお願いしています。

正規表現を使わないようにしました。それを行う方法はありますか？

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

step="any"小数点以下の桁数を許可するの代わりに、step=".01"小数点以下2桁まで許可するを使用します。

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

誰かがオプションの小数点以下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);
});

通貨については、次のことをお勧めします。

<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機能に依存しても問題ありません。

ステップ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 docsを参照してください。

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

jQueryを使用することが私の最善の解決策であることがわかりました。

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

入力タイプで小数点以下2桁のみを許可するには、これを試してください

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

または、@ SamohtVIIの提案に従ってjQueryを使用します

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

このコードを使用

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

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

書くだけ

<input type="number" step="0.1" lang="nb">

lang = 'nb "を使用すると、10進数をコンマまたはピリオドで記述できます

入力時：

step="any"
class="two-decimals"

スクリプト上：

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});