Ограничить количество цифр после десятичных знаков при вводе текста

Question

Существует аналогичный вопрос , который ограничивает количество символов, разрешенных для ввода формы.

В моем случае я хочу ограничить количество цифр, которое можно добавить последесятичная точка до 2 цифр.

<input type="text" maxlength="2"/>

Есть ли способ ограничить цифры после десятичной точки (.)?

Answer 1

Если вам удобно использовать скрипты, то вы можете попробовать следующий подход:

$(document).ready(function() {
  $("input").on("blur", function() {
    $(this).val(parseFloat($(this).val()).toFixed(2));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="0.01" min="0" />

Answer 2

Поскольку я не знаю ни одного способа сделать это в HTML…
Вот как я сделаю это с некоторым JavaScript, используя RegEx для удаления лишних десятичных знаков:

var myInput = document.querySelector('#fixed2');
myInput.addEventListener("keyup", function(){
  myInput.value = myInput.value.replace(/(\.\d{2})\d+/g, '$1');
});

<input id="fixed2" type="text" />

Обратите внимание, что здесь я использовал событие keyup, чтобы вы могли видеть автоматическое удаление.Но он прекрасно работает и с input!

---

⋅ ⋅ ⋅

Мы можем обобщить этот метод для работы с несколькими входами, используя собственный атрибут, такой как decimals:
(Я использую input событие здесь, так что вы видите разницу)

var myInputs = document.querySelectorAll('.fixed');
myInputs.forEach(function(elem) {
  elem.addEventListener("input", function() {
    var dec = elem.getAttribute('decimals');
    var regex = new RegExp("(\\.\\d{" + dec + "})\\d+", "g");
    elem.value = elem.value.replace(regex, '$1');
  });
});

<input class="fixed" type="text" decimals="2" placeholder="2 decimals only" />
<br><br>
<input class="fixed" type="text" decimals="3" placeholder="3 decimals only" />

Надеюсь, это поможет.

Answer 3

Я думаю, что лучший вариант - это восстановить его с помощью валидатора jQuery, где вы можете добавлять требования для каждого поля, которое вы используете.Если вы пытаетесь восстановить это с HTML5, может случиться так, что в некоторых браузерах это не будет работать так, как вы хотите.

Проверьте это -> https://jqueryvalidation.org/

-> https://jqueryvalidation.org/maxlength-method/