Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2020, 15:09
Новичок на форуме
Отправить личное сообщение для workpage Посмотреть профиль Найти все сообщения от workpage
 
Регистрация: 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)'/>
Ответить с цитированием
  #2 (permalink)  
Старый 08.03.2020, 15:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

workpage,
может type="number" ?
Ответить с цитированием
  #3 (permalink)  
Старый 08.03.2020, 17:44
Новичок на форуме
Отправить личное сообщение для workpage Посмотреть профиль Найти все сообщения от workpage
 
Регистрация: 08.03.2020
Сообщений: 6

В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона. Другой вопрос что они отправлены не будут...
Ответить с цитированием
  #4 (permalink)  
Старый 08.03.2020, 17:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ограничение ввода максимального числа
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>
Ответить с цитированием
  #5 (permalink)  
Старый 08.03.2020, 18:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от workpage
В этом случае нельзя во первых ограничить кол-во введённых знаков, а во вторых опять таки можно ввести число не из диапазона.
Это как, если задано макс. 255 и это три цифры? А ручной ввод можно проверять либо запретить.
Ответить с цитированием
  #6 (permalink)  
Старый 08.03.2020, 21:46
Новичок на форуме
Отправить личное сообщение для workpage Посмотреть профиль Найти все сообщения от workpage
 
Регистрация: 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>
СПАСИБО! ТО ЧТО НАДО!
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2020, 23:01
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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 должен быть целым числом, чтобы проверку проходили только целые числа.
Ответить с цитированием
  #8 (permalink)  
Старый 01.12.2022, 12:21
Новичок на форуме
Отправить личное сообщение для workpage Посмотреть профиль Найти все сообщения от workpage
 
Регистрация: 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>
Подскажите, как модифицировать этот скрипт, для работы в том числе с отрицательными числами?
Ответить с цитированием
  #9 (permalink)  
Старый 01.12.2022, 14:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простые числа, не превосходящие заданного числа. jutochka123 Общие вопросы Javascript 2 30.09.2017 13:05
Ограничение максимального числа ввода amio Общие вопросы Javascript 11 03.11.2016 21:08
JS задача. Взаимно простые числа sashok Общие вопросы Javascript 5 23.11.2014 10:16
Есть числа от (0 до 100) что бы все эти числа были заменины в итоге например 110 impi Общие вопросы Javascript 4 08.10.2014 08:30
Поиск максимального числа в числовой строке. Serghter Общие вопросы Javascript 2 06.04.2012 00:48