08.03.2020, 15:09
|
|
Новичок на форуме
|
|
Регистрация: 08.03.2020
Сообщений: 6
|
|
|
Ограничение максимального числа
Есть замечательный скрипт с помощью которого можно ввести только цифры. Как в него добавить проверку максимального и минимального значения в input? Мне нужен диапозон 1-255. Если ввели 300 - автоматический сброс на 255. Если ввели 0 - то сброс в 1.
В JS не силён. Заранее благодарен.
JS
function validate(evt) { //ввод только цифр
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]/;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
HTML
<input type="text" maxlength="3" value="" onkeypress='validate(event)'/>
|
|
08.03.2020, 15:36
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
workpage,
может type="number" ?
|
|
08.03.2020, 17:44
|
|
Новичок на форуме
|
|
Регистрация: 08.03.2020
Сообщений: 6
|
|
|
В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона. Другой вопрос что они отправлены не будут...
|
|
08.03.2020, 17:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Ограничение ввода максимального числа
workpage,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) handler(target);
});
const limit = (min, max) => el => {
let txt = el.value, reg = /\D/g;
if(reg.test(txt)){
reg.lastIndex = 0;
txt = txt.replace(reg, "");
};
let num = Math.max(min, Math.min(+txt, max));
el.value = txt && num != txt ? num : txt;
};
on(document, "input", ".num", limit(1, 255));
});
</script>
</head>
<body>
<input type="text" maxlength="3" value="" class="num" /></body>
</html>
|
|
08.03.2020, 18:27
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от workpage
|
|
В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона.
|
Это как, если задано макс. 255 и это три цифры? А ручной ввод можно проверять либо запретить. |
|
08.03.2020, 21:46
|
|
Новичок на форуме
|
|
Регистрация: 08.03.2020
Сообщений: 6
|
|
Сообщение от рони
|
workpage,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) handler(target);
});
const limit = (min, max) => el => {
let txt = el.value, reg = /\D/g;
if(reg.test(txt)){
reg.lastIndex = 0;
txt = txt.replace(reg, "");
};
let num = Math.max(min, Math.min(+txt, max));
el.value = txt && num != txt ? num : txt;
};
on(document, "input", ".num", limit(1, 255));
});
</script>
</head>
<body>
<input type="text" maxlength="3" value="" class="num" /></body>
</html>
|
СПАСИБО! ТО ЧТО НАДО! |
|
09.03.2020, 23:01
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от workpage
|
|
В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона.
|
Не забывайте про ввод значения пользователями, <input type="number"> позволяет вводить значение сразу с клавиатуры с цифрами (вам ведь не нужен буквенный ввод!), «прокрутка» чисел стрелками, что несомненно улучшает UX, и дополнительный скрипт для этого не нужен.
Также стандартный синтаксис упрощает работу с граничными значениями — вы можете их вводить в одном месте — там, где определено поле ввода!
<input type="number" min="1" max="255" step="1">
<script>
function constrainField(field) {
field.value = field.value === ''
? field.value :
Math.clamp(Number(field.value.replace(/\D/g, '')), field.min, field.max);
}
if("clamp" in Math === false)
Math.clamp = function clamp(x, lower, upper) {
return Math.min(Math.max(lower, x), upper);
}
addEventListener("input", event => {
if(event.target.matches("input[type='number'][min][max]"))
constrainField(event.target);
});
</script>
https://rwaldron.github.io/proposal-...sec-math.clamp
|
Сообщение от laimas
|
|
Это как, если задано макс. 255 и это три цифры?
|
Число может удовлетворять условию, но оно будет дробным. (Например, 249.1) Добавьте атрибут step="1" и min должен быть целым числом, чтобы проверку проходили только целые числа.
|
|
01.12.2022, 12:21
|
|
Новичок на форуме
|
|
Регистрация: 08.03.2020
Сообщений: 6
|
|
|
Сообщение от рони
|
workpage,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) handler(target);
});
const limit = (min, max) => el => {
let txt = el.value, reg = /\D/g;
if(reg.test(txt)){
reg.lastIndex = 0;
txt = txt.replace(reg, "");
};
let num = Math.max(min, Math.min(+txt, max));
el.value = txt && num != txt ? num : txt;
};
on(document, "input", ".num", limit(1, 255));
});
</script>
</head>
<body>
<input type="text" maxlength="3" value="" class="num" /></body>
</html>
|
Подскажите, как модифицировать этот скрипт, для работы в том числе с отрицательными числами? |
|
01.12.2022, 14:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
workpage,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) handler(target);
});
const limit = (min, max) => el => {
let txt = el.value, reg = /[^-0-9]/g;
if(txt == "-") return;
if(reg.test(txt)){
reg.lastIndex = 0;
txt = txt.replace(reg, "");
};
let num = Math.max(min, Math.min(+txt, max));
el.value = txt && num != txt ? num : txt;
};
on(document, "input", ".num", limit(-10, 255));
});
</script>
</head>
<body>
<input type="text" maxlength="3" value="" class="num" /></body>
</html>
|
|
|
|
