Pozostaw 2 miejsca po przecinku w <input type = „number”>

Mam <input type="number">i chcę ograniczyć wprowadzanie użytkowników do liczb czysto lub liczb dziesiętnych do 2 miejsc po przecinku.

Zasadniczo proszę o podanie ceny.

Chciałem uniknąć wyrażenia regularnego. Czy jest na to sposób?

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

Zamiast step="any", co pozwala na dowolną liczbę miejsc po przecinku, użyj step=".01", który pozwala na maksymalnie dwa miejsca po przecinku.

Więcej szczegółów w specyfikacji: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Jeśli przypadek, ktoś szuka wyrażenia regularnego, który dopuszcza tylko liczby z opcjonalnymi 2 miejscami dziesiętnymi

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

Na przykład poniżej znalazłem rozwiązanie dość niezawodne

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

W przypadku waluty sugerowałbym:

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

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

Właściwości „krok”, „min” i „wzorzec” HTML5 będą sprawdzane podczas przesyłania formularza, a nie w trybie onblur. Nie potrzebujesz, stepjeśli masz, patterni nie potrzebujesz, patternjeśli masz step. Możesz więc wrócić do step="any"mojego kodu, ponieważ wzorzec i tak go zweryfikuje.

Jeśli chcesz zweryfikować onblur, uważam, że wskazanie wizualne jest również pomocne, np. Zabarwienie tła na czerwono. Jeśli przeglądarka użytkownika nie obsługuje type="number", nastąpi powrót do type="text". Jeśli przeglądarka użytkownika nie obsługuje sprawdzania poprawności wzorca HTML5, mój fragment kodu JavaScript nie uniemożliwia przesłania formularza, ale daje wizualną wskazówkę. Tak więc dla osób ze słabą obsługą HTML5 i osób próbujących włamać się do bazy danych z wyłączoną obsługą JavaScript lub fałszowaniem żądań HTTP, i tak musisz ponownie sprawdzić poprawność na serwerze. Punktem sprawdzania poprawności w interfejsie jest lepsze wrażenia użytkownika. Tak długo, jak większość użytkowników ma dobre wrażenia, dobrze jest polegać na funkcjach HTML5, pod warunkiem, że kod będzie nadal działał i można zweryfikować na zapleczu.

Krok 1: Podłącz swoje pole wprowadzania numeru HTML do zdarzenia onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

lub w kodzie HTML

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

Krok 2: Napisz setTwoDecimalPlacemetodę

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

Możesz zmienić liczbę miejsc po przecinku, zmieniając wartość przekazywaną do toFixed()metody. Zobacz dokumenty MDN .

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

Odkryłem, że użycie jQuery było moim najlepszym rozwiązaniem.

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

Spróbuj tego, ponieważ zezwala się na wprowadzanie tylko 2 miejsc po przecinku

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

Lub użyj jQuery zgodnie z sugestią @SamohtVII

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

Użyj tego kodu

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

Domyślnie wartość kroku dla elementów wejściowych HTML5 to step = „1”.

tylko napisz

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

lang = 'nb "pozwala ci pisać liczby dziesiętne przecinkiem lub kropką

Na wejściu:

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

Na skrypcie:

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