Форум

broadcast77 · #1 (**permalink**) 13.01.2014, 00:57

Добрый день, уважаемые форумчане. Подскажите пожалуйста, можно ли реализовать такой алгоритм?

Вот например у нас есть 3 input text, в который можно вводить числа.
Числа от 1 до 5. И если мы ввели в первый text число 1, то в два других input text мы теперь можем вводить только числа от 2 до 5.
А если после этого, мы ввели в третий input text число 4, то во второй мы можем ввести только 2, 3, 5. и т.д.

Подскажите пожалуйста алгоритм, если такое возможно реализовать. Конкретного кода не нужно. Буду рад просто услышать алгоритм или псевдокод. А если такое уже реализовывали, то пришлите пожалуйста ссылку.

Спасибо.

Nexus · #2 (**permalink**) 13.01.2014, 01:19

Реализовать можно и довольно легко, но смысл в нем какой?
Кидай на каждый инпут обработчик события и проверяй условия, если условие ложно - чисть поле.

Vlasenko Fedor · #3 (**permalink**) 13.01.2014, 02:03

<body>
    <div id="data">
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div>
    <script>
      var data = document.getElementById('data'),
        allInput = data.querySelectorAll('input'),
        len = allInput.length;
      data.oninput = function (e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        if ('INPUT' != target.tagName) return false;
        var thisValue = target.value;
        if (thisValue <= 0 || thisValue > 5 || isNaN(thisValue)) target.value = '';
        for (var i = 0; i < len; i++) {
          if (target == allInput[i]) continue;
          if (thisValue == allInput[i].value) target.value = '';
        }
      }
    </script>
  </body>

broadcast77 · #4 (**permalink**) 13.01.2014, 03:02

Poznakomlus,
спс за помощь! единственное, что не врубаюсь где тут что, можно плиз с комментариями, если не сложно)

Vlasenko Fedor · #5 (**permalink**) 13.01.2014, 03:28

<body>
    <div id="data">
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div>
    <script>
// выбрали div c id #data и все INPUT в нем allInput
      var data = document.getElementById('data'),
        allInput = data.querySelectorAll('input'),
// len - количество INPUT
        len = allInput.length;
//  обрабатываем событие oninput элемента data
      data.oninput = function (e) {
// кроссброузерно получили элемент вызвавший событие 
        e = e || window.event;
        var target = e.target || e.srcElement;
// если событие вызвал не INPUT выходим
        if ('INPUT' != target.tagName) return false;
// получили значение элемента
        var thisValue = target.value;
// проверяем принадлежит ли значение элемента  диапазону. Число ли это и если нет, то значение ставим пусто 
        if (thisValue <= 0 || thisValue > 5 || isNaN(thisValue)) target.value = '';
// проверяем в цикле содержится ли новое значение в других input
        for (var i = 0; i < len; i++) {
//если проверяемый элемент равен текущему продолжить цикл с новой позиции
          if (target == allInput[i]) continue;
// если значение равно значению иного INPUT, то значение ставим пусто  
          if (thisValue == allInput[i].value) target.value = '';
        }
      }
    </script>
  </body>

broadcast77 · #6 (**permalink**) 13.01.2014, 10:46

Спасибо! Так яснее!! =)

Форум

Справочник

Discord чат

Курсы javascript