Есть в страничке <input type="number" name="number">
У меня не получается сделать так, чтобы инпут не принимал символ минус.
Я понимаю, что нужно добавить атрибут onchange=""
, но что прописать?
Прошу помощи в написании кода.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуИтак, протестировав и подытожив предыдущие ответы, сделал вывод, что ни один из вариантов не решает задачу полностью. В разных вариантах - разные недочёты:
-
, +
, .
, ,
и продолжить ввод числа;Пробуем избавиться от недостатков обозначенных выше:
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
(возможно, код придётся подправить).min="0"
просто не позволит отправить форму, а значит городить скрипты нет никакой необходимости и все ответы здесь чепуха :)
22 мар 2020 в 11:59
input[type=number]
. Создаю контент и не подвешиваю вопросы ответами в комментариях ;-)
checkValidity()
так что ответы всё равно чепуха :)
22 мар 2020 в 12:47
С помощью 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">
Пример на чистом 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" />
Так в начале символ - (/-/) или любая не цифра (/\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');">
min="0"
не вариант?