0

Как в JS запретить ввод символов e, - в этом input'е и сделать ограничение на максимальное вводимое число 100?

HTML:

<input type="number" class="mytext">
<p id="contenInput"></p>

JS:

$(document).ready (function() {      
    $(".mytext").keyup(function() {    
        var numb = +$(".mytext").val();    
        $('#contenInput').text($(".mytext").val());
        $('#contenInput').text(numb + 70+ 1);
    });   
});

1 ответ 1

1

Cохранять последнее «правильное» значение. Изначально оно пустое.

При каждом изменении – по событию "input" – проверять всё содержимое поля:

  • больше или равно нулю и не больше 100;
  • не содержит "-";
  • не содержит "e";

Если проходит валидацию – сохранять новое «правильное» значение, если нет – откатывать на сохранённое ранее.

К тому же элемент <input type="number"> HTML5 может иметь атрибуты min и max, ограничивающие вводимые значения.

var $el = $(".mytext");
var $out = $('#contenInput');
var prev = '';

$(document).ready(function() {
  $el.on("input", function() {
    var val = $el.val();
    var numb = parseInt(val,10);
    if(!!~val.indexOf('-')  ||  !!~val.indexOf('e')  ||  numb > 100) {
      $el.val( prev);
      return;
    } else {
      prev = val;
    }
    $out.text(numb + 70 + 1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="mytext" min="0" max="100">
<p id="contenInput"></p>

Вообще, input с type="number" ведёт себя не очень предсказуемо: он не возвращает нечисловые значения, которые в него попадают. Если сразу начать вводить минусы в пустом поле, они не попадают в строку .val(). Может, сделать его type="text", отказавшись от микро-стрелочек вверх-вниз?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.