Форум

workpage · #1 (**permalink**) 08.03.2020, 15:09

Есть замечательный скрипт с помощью которого можно ввести только цифры. Как в него добавить проверку максимального и минимального значения в 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)'/>

рони · #2 (**permalink**) 08.03.2020, 15:36

workpage,
может type="number" ?

workpage · #3 (**permalink**) 08.03.2020, 17:44

В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона. Другой вопрос что они отправлены не будут...

рони · #4 (**permalink**) 08.03.2020, 17:50

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>

laimas · #5 (**permalink**) 08.03.2020, 18:27

Сообщение от workpage

В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона.

Это как, если задано макс. 255 и это три цифры? А ручной ввод можно проверять либо запретить.

workpage · #6 (**permalink**) 08.03.2020, 21:46

Сообщение от рони

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>

СПАСИБО! ТО ЧТО НАДО!

Malleys · #7 (**permalink**) 09.03.2020, 23:01

Сообщение от 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 должен быть целым числом, чтобы проверку проходили только целые числа.

workpage · #8 (**permalink**) 01.12.2022, 12:21

Сообщение от рони

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>

Подскажите, как модифицировать этот скрипт, для работы в том числе с отрицательными числами?

рони · #9 (**permalink**) 01.12.2022, 14:23

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>

Форум

Справочник

Discord чат

Курсы javascript