<İnput type = “number”> içinde 2 ondalık basamağa izin ver

Ben bir <input type="number">ve ben tamamen giriş veya 2 ondalık basamaklara kadar ondalık sayılar ile kullanıcıların girişini kısıtlamak istiyorum.

Temel olarak, bir fiyat girişi istiyorum.

Normal ifade yapmaktan kaçınmak istedim. Bunu yapmanın bir yolu var mı?

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

Bunun yerine, step="any"herhangi bir sayıda ondalık basamağa step=".01"izin veren, iki ondalık basamağa kadar izin veren kullanın .

Spesifikasyonda daha fazla ayrıntı: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Eğer biri yalnızca isteğe bağlı 2 ondalık basamağı olan sayılara izin veren bir normal ifade arıyorsa

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

Bir örnek olarak, aşağıdaki çözümün oldukça güvenilir olduğunu gördüm

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

Para birimi için şunu öneririm:

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

Bkz. Http://jsfiddle.net/vx3axsk5/1/

HTML5 özellikleri "adım", "dk" ve "kalıp" form gönderildiğinde değil, onurda değil doğrulanır. Eğer ihtiyacınız stepvarsa bir patternve ihtiyacınız patternyoksa bir step. step="any"Desen yine de doğrulayacağından kodumla geri dönebilirsiniz .

Onblur'u doğrulamak istiyorsanız, kullanıcıya görsel bir ipucu vermenin arka planı kırmızı renklendirmek gibi yararlı olduğuna inanıyorum. Kullanıcının tarayıcısı desteklemiyorsa type="number"geri dönecektir type="text". Kullanıcının tarayıcısı HTML5 kalıp doğrulamasını desteklemiyorsa, JavaScript snippet'im formun gönderilmesini engellemez, ancak görsel bir ipucu verir. Bu nedenle, HTML5 desteği zayıf olan kişiler ve JavaScript devre dışı bırakılmış veya HTTP İstekleri dövme ile veritabanına girmeye çalışan kişiler için, yine de sunucuda tekrar doğrulamanız gerekir. Ön uçta doğrulamanın önemli olduğu nokta, daha iyi bir kullanıcı deneyimi sağlamaktır. Bu nedenle, kullanıcılarınızın çoğu iyi bir deneyime sahip olduğu sürece, kodun yine de çalışması ve arka uçta doğrulayabilmeniz koşuluyla HTML5 özelliklerine güvenmek iyidir.

1. Adım: HTML numarası giriş kutunuzu bir değişim etkinliğine bağlayın

myHTMLNumberInput.onchange = setTwoNumberDecimal;

veya HTML kodunda

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

2. Adım: setTwoDecimalPlaceYöntemi yazın

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

toFixed()Yönteme iletilen değeri değiştirerek ondalık basamak sayısını değiştirebilirsiniz . Bkz. MDN belgeleri .

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

Ben jQuery kullanarak benim en iyi çözüm bulundu.

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

Giriş türünde yalnızca 2 ondalığa izin vermek için bunu deneyin

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

Veya @SamohtVII tarafından önerilen şekilde jQuery kullanın

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

Bu kodu kullan

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

Varsayılan olarak HTML5 Giriş öğeleri için Adım değeri adım = "1" dir.

sadece yaz

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

lang = 'nb "ondalık sayılarınızı virgül veya nokta ile yazmanıza izin verir

Girişte:

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

Komut dosyasında:

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