1

Есть в страничке <input type="number" name="number">
У меня не получается сделать так, чтобы инпут не принимал символ минус.
Я понимаю, что нужно добавить атрибут onchange="", но что прописать?

Прошу помощи в написании кода.

4
  • А просто сделать min="0" не вариант?
    – andreymal
    21 мар 2020 в 19:33
  • @andreymal :)))) да min='0' решил все, спасибо 22 мар 2020 в 7:36
  • @django_starter: Сомневаюсь, что только в атрибуте дело ;-) Будьте добры, прочитайте мой ответ.
    – UModeL
    22 мар 2020 в 11:50
  • 1
    @UModeL да ваш код, уже на проф уровне! спасибо за ответ 23 мар 2020 в 9:43

4 ответа 4

2

Итак, протестировав и подытожив предыдущие ответы, сделал вывод, что ни один из вариантов не решает задачу полностью. В разных вариантах - разные недочёты:

  • При вводе некорректного символа, затирается уже существующее значение;
  • Если вернуть каретку (текстовый курсор) в начало, с помощью стрелок или мыши, то можно ввести символы -, +, ., , и продолжить ввод числа;
  • Уменьшая число нативной кнопкой, при переходе через ноль, попеременно меняется значение с 0 на 1;
  • Возможность вставить ранее перечисленные символы через Ctrl + V;
  • Избыточность кода.

Пробуем избавиться от недостатков обозначенных выше:

input:valid { background: #dfd; } input:invalid { background: #fdd; }
<input type="number" 
  
  min="0" 
  onkeypress="return (event.keyCode > 47 && event.keyCode < 58);" 
  oninput="this.value = this.value.replace(/[^0-9]/g, '');" 
  onpaste="return /^[0-9]+$/g.test((event.clipboardData || window.clipboardData).getData('text'));"
  
  pattern="^[0-9]+$" 
  required
/>

В данном примере, два последних атрибута (pattern и required), а также CSS, нужны только для наглядности. Но, возможно, они Вам пригодятся в дальнейшем.


Минусы тоже присутствуют:

  • Можно вводить только целые числа (об этом ничего не упомянуто в вопросе);
  • Давно обещают прекращение поддержки event.keyCode (возможно, код придётся подправить).
4
  • Ограничивать ввод скриптами нет смысла. Если введён минус, то min="0" просто не позволит отправить форму, а значит городить скрипты нет никакой необходимости и все ответы здесь чепуха :)
    – andreymal
    22 мар 2020 в 11:59
  • @andreymal: Форма подразумевается, но конкретно её не было во вводной. Потому такое количество вариантов. А "чепуха" может ещё не раз пригодиться кому-нибудь, т.к. применима не только для input[type=number]. Создаю контент и не подвешиваю вопросы ответами в комментариях ;-)
    – UModeL
    22 мар 2020 в 12:37
  • Если инпут не используется в форме, значит он используется в скриптах, а в них достаточно сделать checkValidity() так что ответы всё равно чепуха :)
    – andreymal
    22 мар 2020 в 12:47
  • @andreymal: А почему Вы об этом в комментариях пишете, а не в ответе?
    – UModeL
    22 мар 2020 в 12:48
2

С помощью JS

const reg = /[^0-9]/,
  input = document.querySelector('#example');
input.addEventListener('input', function(e) {
  e.target.value = e.target.value.replace(reg, '');
})
<input type="number" id="example">

3
  • Теперь инпут не принимает символы 0-9
    – Leonid
    21 мар 2020 в 19:02
  • вроде принимает
    – vantal
    21 мар 2020 в 19:07
  • Принимает, верно.
    – Leonid
    21 мар 2020 в 19:11
2

Пример на чистом js:

// Запрет ввода букв в числовом поле
    var count = document.getElementById("count");

    if (!!count) {
        count.onkeypress = function(e) {
            e = e || event;

            if (e.ctrlKey || e.altKey || e.metaKey) return;

            var chr = getChar(e);

            // с null надо осторожно в неравенствах,
            // т.к. например null >= '0' => true
            // на всякий случай лучше вынести проверку chr == null отдельно
            if (chr == null) return;

            if (chr < '0' || chr > '9') {
                return false;
            }
        }
    }

    function getChar(event) {
        if (event.which == null) {
            if (event.keyCode < 32) return null;
            return String.fromCharCode(event.keyCode) // IE
        }

        if (event.which != 0 && event.charCode != 0) {
            if (event.which < 32) return null;
            return String.fromCharCode(event.which) // остальные
        }

        return null; // специальная клавиша
    }
<input type="number" max="999" min="0" maxlength="10" id="count" required>

Пример на jQuery:

$("#input").keypress(function(e) {
  if (
    e.which != 8 &&
    e.which != 0 &&
    e.which != 46 &&
    (e.which < 48 || e.which > 57)
  ) {
    return false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" min="0" />

2

Так в начале символ - (/-/) или любая не цифра (/\D/) не ставится, но если цифры уже присутствуют, то инпут обнуляется

<input type="number" oninput="this.value = this.value.replace(/-/, '')">

Или

<input type="number" oninput="this.value = this.value.replace(/\D/, '')">

А так проверяется на меньше 0. И возвращается по модулю, если меньше.

<input type="number" oninput="if(this.value < 0) this.value *= -1">

Можно и так: любое не число будет возвращать прежнее число.

<input type="number" data-value="" oninput="if(this.value)this.setAttribute('data-value', this.value); else this.value = this.getAttribute('data-value');">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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