Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.04.2017, 13:12   #1
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию Зависимость ввода min и max числа в input

Здрасти всем ещё раз, скажите пожалуйсто, как ограничить ввод чисел в input при выборе option?
Код HTML:
<!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>
 
<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>
</body>
</html>
Например <option value="1">A</option> имеет минимальные и максимальные значения ширины и высоты "1": {wMin: 25, wMax: 30, hMax: 40},
как при вводе числа в input-ширины и высоты происходило ограничение ввода исходя из условия "1": {wMin: 25, wMax: 30, hMax: 40}.
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 11.04.2017, 13:34   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

аттрибуты min и max

Код:
<input type="number" id="editbox1" step="0.01" min="25" max="30">
впрочем, это не защищает от ручного ввода в это поле:
Цитата:
Для ограничения введённого числа предназначены атрибуты min и max, они могут принимать отрицательное и положительное значение. При достижении верхнего или нижнего порога стрелки в поле в зависимости от браузера блокируются или не дают никакого эффекта (пример 1). Несмотря на такие запреты, в любом случае в поле самостоятельно можно вводить любые значения, включая текст. Атрибуты min и max работают только при использовании стрелок в поле.

Последний раз редактировалось Serge_Bliznykov; 11.04.2017 в 13:42.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 11.04.2017, 13:58   #3
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

попробуйте такой код:
Код:
<!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: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>
 
<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);

//width.addEventListener("input", myFunc);
//height.addEventListener("input", 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>
</body>
</html>
Serge_Bliznykov вне форума Ответить с цитированием
Старый 11.04.2017, 13:58   #4
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

мне нужно ограничения ввода взависимости от значений option, а не просто предел ввода в разметке.
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 11.04.2017, 14:00   #5
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Попробую, спасибо.
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 11.04.2017, 14:04   #6
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Вроде работает, спасибо огромное.
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 11.04.2017, 15:46   #7
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Блин, возник такой косяк, если какое либо значение превышено, то все равно происходит расчет по введенному значению, хотя в input-е встало min и max значение.
т.е. ширина max=3, в input ввожу 4, расчет происходит исходя из введенного значения т.е. 4, хотя в input возращается 3.
Еду медленно, но верно!

Последний раз редактировалось spoon100500; 11.04.2017 в 15:51.
spoon100500 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пусть даны натуральные числа k, n, вещественные числа a1, a2,...,akn. Получите последовательность max(a1, a2,...,ak), max(ak+1, ak Nil09511 Помощь студентам 3 12.11.2014 23:09
Массивы. Поменять местами все min и max (даже если будет 4 -min и 1-max). Виталик124 Паскаль, Turbo Pascal, PascalABC.NET 6 19.02.2014 22:44
n - массивов, разной размерности, нужно найти min и max в этих массивах. Из полученных min найти наименьший элемент, из max наибол dmks Помощь студентам 5 09.10.2013 20:48
списке целых чисел все элементы между max и min заменить полусуммой max и min Roman one C/C++ Базы данных 0 20.12.2012 12:14
Матрица Min-Max и Max-Min boog Помощь студентам 3 23.12.2010 13:19