Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
 Аватар для Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 450

Зависимость ввода min и max числа в input

11.04.2017, 16:00. Показов 1844. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здрасти всем ещё раз, скажите пожалуйсто, как ограничить ввод чисел в input при выборе option?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
</head>
<body>
 
<span style="color:#0000FF;font-family:'Times New Roman';font-size:20px;"><strong><em>Ширина, м</em></strong>&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<strong><em>Высота, м</em></strong></span></div>
<br>
<input type="number" id="editbox1" step="0.01">
<input type="number" id="editbox2" step="0.01">
 <br>
 
<div class="minMaxHeight" style="position:absolute; left:190px;"><!--max высота-->
  <i><strong>Max.</strong><span id="maxHeight"> 0</span>см</i>
</div>
 
<div class="minMaxWidth"><!--minmax ширина-->
  <i><strong>Min.</strong><span id="minWidth"> 0</span>см</i><!--min ширина-->
  <br>
  <i><strong>Max.</strong><span id="maxWidth"> 0</span>см</i><!--max ширина-->
</div>
 
<select size="1" id="combobox"><!--Системы-->
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>
 
<select size="1" id="combobox1"><!--Системы-->
  <option value="4">D</option>
  <option value="5">F</option>
  <option value="6">G</option>
</select>
</body>
</html>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
var values = {
  "1": {wMin: 25, wMax: 30, hMax: 40},
  "2": {wMin: 50, wMax: 60, hMax: 70},
  "3": {wMin: 80, wMax: 90, hMax: 100},
  "4": {wMin: 110, wMax: 120, hMax: 130},
  "5": {wMin: 140, wMax: 150, hMax: 160},
  "6": {wMin: 170, wMax: 180, hMax: 190}
}
 
var wMin, wMax, hMax;
var width, height;
 
wMin = document.getElementById('minWidth'); //min ширина
wMax = document.getElementById('maxWidth'); //max ширина
hMax = document.getElementById('maxHeight'); //max высота
 
width = document.getElementById('editbox1');
height = document.getElementById('editbox2');
 
var cb = document.querySelector('#combobox');
var cb1 = document.querySelector('#combobox1');
 
cb.addEventListener("change", myFunc);
cb1.addEventListener("change", myFunc);
 
//width.addEventListener("input", myFunc);
//height.addEventListener("input", myFunc);
 
function myFunc () {
  wMin.textContent = values[this.value].wMin;
  wMax.textContent = values[this.value].wMax;
  hMax.textContent = values[this.value].hMax;
};
 
// Как-будто при загрузке страницы поменяли значение первого чекбокса
myFunc.apply(cb);
 
</script>
Например: <option value="1">A</option> имеет минимальные и максимальные значения ширины и высоты "1": {wMin: 25, wMax: 30, hMax: 40},
как при вводе числа в input-ширины и высоты ограничть ввода исходя из условия "1": {wMin: 25, wMax: 30, hMax: 40}?

Добавлено через 53 минуты
Этот вариант я находил на просторах, но min и max имеет не одно значения, их много.

Добавлено через 1 час 44 минуты
Сделал так, вроде работает.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
</head>
<body>
 
<span style="color:#0000FF;font-family:'Times New Roman';font-size:20px;"><strong><em>Ширина, м</em></strong>&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<strong><em>Высота, м</em></strong></span></div>
<br>
<input type="number" id="editbox1" onblur="up1(this)" step="0.01">
<input type="number" id="editbox2" onblur="up2(this)" step="0.01">
 <br>
 
 
<div class="minMaxHeight" style="position:absolute; left:100px;"><!--max высота-->
  <i><strong>Max.</strong><span id="maxHeight"> 0</span>см</i>
</div>
 
<div class="minMaxWidth"><!--minmax ширина-->
  <i><strong>Min.</strong><span id="minWidth"> 0</span>см</i><!--min ширина-->
  <br>
  <i><strong>Max.</strong><span id="maxWidth"> 0</span>см</i><!--max ширина-->
</div>
 
<select size="1" id="combobox"><!--Системы-->
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>
 
<select size="1" id="combobox1"><!--Системы-->
  <option value="4">D</option>
  <option value="5">F</option>
  <option value="6">G</option>
</select>
</body>
</html>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script>
var values = {
  "1": {wMin: 25, wMax: 30, hMax: 40},
  "2": {wMin: 50, wMax: 60, hMax: 70},
  "3": {wMin: 80, wMax: 90, hMax: 100},
  "4": {wMin: 110, wMax: 120, hMax: 130},
  "5": {wMin: 140, wMax: 150, hMax: 160},
  "6": {wMin: 170, wMax: 180, hMax: 190}
}
 
var wMin, wMax, hMax;
var ed1_width, ed2_height;
 
wMin = document.getElementById('minWidth'); //min ширина
wMax = document.getElementById('maxWidth'); //max ширина
hMax = document.getElementById('maxHeight'); //max высота
 
ed1_width = document.getElementById('editbox1');
ed2_height = document.getElementById('editbox2');
 
var cb = document.querySelector('#combobox');
var cb1 = document.querySelector('#combobox1');
 
cb.addEventListener("change", myFunc);
cb1.addEventListener("change", myFunc);
 
function up1(e) {
  if (e.value.indexOf(".") != '-1') {
    e.value=e.value.substring(0, e.value.indexOf(".") + 3);
  }
  if(+e.value<+e.getAttribute("min")){
    e.value=e.getAttribute("min");
  }
  else if(+e.value>+e.getAttribute("max")){
    e.value=e.getAttribute("max");
  }
   
}
 
function up2(e) {
  if (e.value.indexOf(".") != '-1') {e.value=e.value.substring(0, e.value.indexOf(".") + 3);}
  if(+e.value>+e.getAttribute("max")){e.value=e.getAttribute("max");}
}
 
function myFunc () {
  wMin.textContent = values[this.value].wMin;
  wMax.textContent = values[this.value].wMax;
  hMax.textContent = values[this.value].hMax;
  ed1_width.setAttribute("min", values[this.value].wMin);
  ed1_width.setAttribute("max", values[this.value].wMax);
  up1(ed1_width);
  ed2_height.setAttribute("max", values[this.value].hMax);
  up2(ed2_height);
};
 
// Как-будто при загрузке страницы поменяли значение первого чекбокса
myFunc.apply(cb);
 
</script>
Добавлено через 7 минут
Но возникает одна проблема, ограничение работает все ок, но если введу значение превышающее max или min в input то расчет происходит по введенному значению т.е. ширина max=3 ввел 4, расчет производится по введенной 4, хотя в input вернулось 3. Что сделать можно?
Событие на ширину и высоту стоит "input" через addEventListener, а в разметке onblur="up1(this)".
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
11.04.2017, 16:00
Ответы с готовыми решениями:

Процедура: Даны три числа a,b,c. Вычислить (max(a,b)+min(a,c))/(max(b,c)*min(a,b))+max(min(a,b),min(b,c))
Даны три числа a,b,c. Вычислить (max(a,b)+min(a,c))/(max(b,c)*min(a,b))+max(min(a,b),min(b,c)) с помощью использования процедур.

В input.txt есть числа в столбик, найти min и max и записать их в output.txt.
Уважаемые знатоки, напишите программку, пожалуйста. В input.txt есть числа в столбик, найти min и max и записать их в output.txt. Как...

18. Даны различные действительные числа x, y, z, d. Найти max (min (x, y), min (x, z), min (z, d)
Даны различные действительные числа x, y, z, d. Найти max (min (x, y), min (x, z), min (z, d)).

1
 Аватар для Дмитрий Дмитрий
1 / 1 / 2
Регистрация: 17.09.2016
Сообщений: 450
17.04.2017, 16:00  [ТС]
Решено.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.04.2017, 16:00
Помогаю со студенческими работами здесь

Даны целые числа а, b, с. Вычислить в-сумму у = min (a, b + c) + max (ac, b)-min (a2, c)
Даны целые числа а, b, с. Вычислить в-сумму у = min (a, b + c) + max (ac, b)-min (a2, c). Как эту программу реализовать в код?

Даны вещественные числа x, y, z. Найти min(max(x+1,y-1), min(y,z)
Даны вещественные числа x, y, z. Найти min(max(x+1,y-1), min(y,z)). работа в Pascal Помогите пожалуйста

Описать функцию F (a, min, max ) определяющую значение максимального max и минимального min элементов этого массива
Помогите с задачкой! плиз! Для вещественного массива а, описать функцию F (a, min, max ) определяющую значение максимального max и...

Найти max и min элементы в массиве и номер элемента, близкого к среднему арифметическому min и max.
Привет всем! Очень прошу помочь в решении задачи на определение характеристик одномерного массива. Задача такова: Дана последовательность...

По заданным значениям x, y, z вычислить значения u: u=min (x, max(y, z). Для расчета написать функции max(x, y) и min(x
По заданным значениям x, y, z вычислить значения u: u=min (x, max(y, z)). Для расчета написать функции max(x, y) и min(x, y).


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru