JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

<!--<input type="number" min="0" step="0.01" value="" name="Volumen" placeholder="Bitte max. 6 Stellen vor dem Komma und 2 Stellen nach dem Komma eingeben" pattern="[0-9]{5}" oninput="setSixNumberDecimal(this)" />-->

<input type="number" min="0" step="0.01" value="" name="Volumen" placeholder="Bitte max. 6 Stellen vor dem Komma und 2 Stellen nach dem Komma eingeben" pattern="\d{6}(\.\d{1,2})" />


</form>

CSS

/*
input[type="number"] {
-moz-appearance: textfield;
width:50%;
padding:2rem;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
*/

JavaScript

/*
function setSixNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(6);
    };
    
    
$(document).ready(function(){
  $('input#Volumen').blur(function(){
    var num = parseFloat($(this).val());
    var cleanNum = num.toFixed(2);
    $(this).val(cleanNum);
  });
});*/