Возможно ли проверить (запретить отображать) значение десятичной длины перед отображением его в поле ввода?

#javascript #regex

#javascript #регулярное выражение

Вопрос:

У нас есть тот же тег ввода и прослушиватель событий для проверки ввода пользователя, мы принимаем только числа с плавающей запятой и целое число, и если это число с плавающей запятой — нам нужно показать только 2 десятичные цифры после комы или точки.И мы просто хотим запретить вводить 3-й десятичный тип, но принимаем изменение целой части для нашего значения.

Нет видимой замены, нет изменений после размытия.Просто предотвращаю 3-ю десятичную цифру при вводе.

1. @richardnelson Это не помешает вводу третьего десятичного знака. Это вопрос о вводе, а не о выводе.

2. ричард Нельсон, без округления, запрещает вводить следующую цифру

3. @richardnelson Опять же, это не предотвратит неправильный ввод. Это просто подтвердит это. OP хочет предотвратить ввод третьей цифры.

4. @richardnelson Да, но это должно быть событие input или a key , а не change поскольку вам нужно оставить поле для change запуска.

Ответ №1:

Вы можете проверить входные данные на наличие точки.

В случае, если оно есть, сравните его позицию с длиной строки, и если оно превышает количество цифр, которое вы хотите, вырежьте остальное.

 document.getElementById("theInput").addEventListener("input", process);

function process() {
  var text = document.getElementById("theInput").value;
  var index = text.indexOf(".");
  if (index > -1) {
    if (text.length - index > 3) {
      document.getElementById("theInput").value = text.substr(0, text.length - 1);
    }
  }
}

 <input type="input" id="theInput">

Ответ №2:

Решено! Возможно, кому-нибудь когда-нибудь это пригодится!

селектор — целевой ввод

n — количество знаков после комы

 function floatRestriction(selector, n){

        var targetElement = document.querySelector(selector);
        var oldValue = '';
        var regexValue = '^([0-9] [,.]{1}[0-9]{0,' n '}|[0-9] |)$';
        var re = new RegExp(regexValue);

       targetElement.addEventListener('keypress', function(event){
            oldValue = event.target.value;      
       });

       targetElement.addEventListener('input', function(event){

            if(!re.test(event.target.value)){
            event.target.value = oldValue || '';
            }
      });

    }
    
floatRestriction('#someInput', 2);

     <input type="input" id="someInput">