Минимальное значение числа в input type text

Question

<input type="text" name="summakr" required id="inpt" placeholder="0.1000">

Нужен конкретно type text но значение min не применяется к этому типу

Как поступить что бы установить минимальное введенное значение в 0.016, не меняя type на number?

Answer 1

Лучше сделать с type="number", а дизайн можно на свое усмотрение подкорректировать

Answer 2

Если прям никак нельзя использовать type="number", то вот вариант:

Устанавливаете минимальное значение через data-min, так же как в min.
Если value < min, то в value ставится min.

document.querySelector('#inpt').addEventListener('input', function(e) {
  let target = e.target;
  if(isNumber(target.value)) {
    target.setCustomValidity('');
    let min = Number(target.getAttribute('data-min'));
    let val = Number(target.value);
    if(val < min) target.value = min;
  } else target.setCustomValidity('Only number');
});

function isNumber(n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
}

input:invalid {border-color: red;}

<input type="text" id="inpt" placeholder="0.1000" data-min="0">

Или вариант, когда value не заменяется, но инпут становится невалидным.

document.querySelector('#inpt').addEventListener('input', function(e) {
  let target = e.target;
  if(isNumber(target.value)) {
    target.setCustomValidity('');
    let min = Number(target.getAttribute('data-min'));
    let val = Number(target.value);
    if(val < min) target.setCustomValidity('min '+min);
  } else target.setCustomValidity('Only number');
});

function isNumber(n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
}

input:invalid {border-color: red;}

<input type="text" id="inpt" placeholder="0.1000" data-min="0">

БЛОГ НА HUSL

Минимальное значение числа в input type text

Ответы (2 шт):