Прошу помочь с html input:number

Question

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

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

Answer 1

Так в начале символ - (/-/) или любая не цифра (/\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');">

Answer 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">

Answer 3

Пример на чистом 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" />

Answer 4

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

При вводе некорректного символа, затирается уже существующее значение;
Если вернуть каретку (текстовый курсор) в начало, с помощью стрелок или мыши, то можно ввести символы -, +, ., , и продолжить ввод числа;
Уменьшая число нативной кнопкой, при переходе через ноль, попеременно меняется значение с 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 (возможно, код придётся подправить).

БЛОГ НА HUSL

Прошу помочь с html input:number

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