Izinkan 2 tempat desimal di <input type = "number">

Saya punya <input type="number"> dan saya ingin membatasi input pengguna ke angka murni atau angka dengan desimal hingga 2 tempat desimal.

Pada dasarnya, saya meminta input harga.

Saya ingin menghindari melakukan regex. Apakah ada cara untuk melakukannya?

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

Alih-alih step="any", yang memungkinkan untuk sejumlah tempat desimal, gunakan step=".01", yang memungkinkan hingga dua tempat desimal.

Lebih detail dalam spesifikasi: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Jika ada yang mencari regex yang memungkinkan hanya angka dengan 2 desimal opsional

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

Sebagai contoh, saya menemukan solusi di bawah ini cukup dapat diandalkan

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);
});

Untuk mata uang, saya sarankan:

<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>

Lihat http://jsfiddle.net/vx3axsk5/1/

Properti HTML5 "langkah", "min" dan "pola" akan divalidasi ketika formulir dikirimkan, bukan di blur. Anda tidak perlu stepjika Anda memiliki patterndan Anda tidak perlu patternjika Anda punya step. Jadi Anda bisa kembali kestep="any" dengan kode saya karena pola akan memvalidasinya.

Jika Anda ingin memvalidasi onblur, saya yakin memberi pengguna isyarat visual juga membantu seperti mewarnai latar belakang merah. Jika browser pengguna tidak mendukung type="number"itu akan mundur ke type="text". Jika browser pengguna tidak mendukung validasi pola HTML5, cuplikan JavaScript saya tidak mencegah pengiriman formulir, tetapi memberikan isyarat visual. Jadi untuk orang-orang dengan dukungan HTML5 yang buruk, dan orang-orang yang mencoba meretas ke dalam basis data dengan JavaScript dinonaktifkan atau memalsukan Permintaan HTTP, Anda harus memvalidasi lagi di server. Poin dengan validasi di front-end adalah untuk pengalaman pengguna yang lebih baik. Jadi, selama sebagian besar pengguna Anda memiliki pengalaman yang baik, tidak masalah untuk mengandalkan fitur HTML5 asalkan kode tersebut masih berfungsi dan Anda dapat memvalidasi di back-end.

Langkah 1: Kaitkan kotak input nomor HTML Anda ke acara pertukaran

myHTMLNumberInput.onchange = setTwoNumberDecimal;

atau dalam kode HTML

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

Langkah 2: Tulis setTwoDecimalPlacemetodenya

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

Anda dapat mengubah jumlah tempat desimal dengan memvariasikan nilai yang diteruskan ke toFixed()metode. Lihat dokumen MDN .

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

Saya menemukan menggunakan jQuery adalah solusi terbaik saya.

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

Coba ini untuk memungkinkan hanya 2 desimal dalam tipe input

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

Atau Gunakan jQuery seperti yang disarankan oleh @SamohtVII

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

Gunakan kode ini

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

Secara default, nilai Langkah untuk elemen Input HTML5 adalah langkah = "1".

hanya menulis

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

lang = 'nb "memungkinkan Anda menulis angka desimal Anda dengan koma atau titik

Pada masukan:

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

Pada skrip:

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