За последние 24 часа нас посетили 20054 программиста и 1577 роботов. Сейчас ищут 1993 программиста ...

Как подружить скрипт с маской?

Тема в разделе "JavaScript и AJAX", создана пользователем AlexGrenn, 31 мар 2015.

  1. AlexGrenn

    AlexGrenn Новичок

    С нами с:
    31 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    Здравствуйте очень нужна помощь
    Ситуация такая есть скрипт который высчитывает время если промежуток временной попадает от 12:00 до 12:45 то в третьем поле пишутся минуты которые попали в этот промежуток к примеру в первом поле 12:10 во втором 12:20 в третьем поле появится 10

    Но время приходится вбивать вручную так как маска ввода --:-- она хоть и работает но время в итоге не считается а без маски все работает. Но маска нужна ну или какая нибуть альтернатива чтобы время можно было забивать без ручного ввода ":" этих точек.


    Вот сам код https://jsfiddle.net/alexgrenn/wqz18pf8/

    Код (PHP):
    1. <!DOCTYPE HTML>
    2.  
    3. <html>
    4.  
    5. <head>
    6.   <title>Untitled</title>
    7.   <meta charset="utf-8">
    8.   <style type="text/css">
    9.  
    10.   </style>
    11.    <script>
    12.     function cost(run, end) {
    13.     var lunch = [(new Date()).setHours(12, 0, 0, 0),(new Date()).setHours(12, 45, 0, 0)]
    14.     run =  (new Date()).setHours(run[0], run[1],0,0);
    15.     end =  (new Date()).setHours(end[0], end[1],0,0);
    16.     run > lunch[0] && (lunch[0]=run);
    17.     end < lunch[1] && (lunch[1]=end);
    18.     if(run > lunch[1]||end < lunch[0]||run > end) return 0;
    19.     return (lunch[1] - lunch[0])/60000 ;
    20. };
    21.     document.addEventListener("input", function(event) {
    22.     var el = event.target;
    23.     if (el.classList.contains('time')) {
    24.       var inp =  document.querySelectorAll('.time');
    25.       if (inp[0].value.length != 5 || inp[1].value.length != 5) return ;
    26.          var run =  inp[0].value.split(':'),
    27.           end =  inp[1].value.split(':');
    28.           inp[2].value = cost(run, end)
    29.  
    30.     }
    31. });
    32.  
    33.   </script>
    34. </head>
    35.  
    36. <body>
    37. <input type="text" class="time">
    38. <input type="text" class="time">
    39. <input type="text" class="time">
    40. </body>
    41.  
    42. </html>
     
  2. rodent90

    rodent90 Новичок

    С нами с:
    26 мар 2015
    Сообщения:
    533
    Симпатии:
    37
  3. AlexGrenn

    AlexGrenn Новичок

    С нами с:
    31 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    Вот когда пытаюсь использовать данные плагины у меня почему то происходит либо-либо. Либо маска работает но подсчет не идет а если маску отключаю подсчет запускается. А в чем проблема не пойму.
     
  4. AlexGrenn

    AlexGrenn Новичок

    С нами с:
    31 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    Получается что любое дополнительное так сказать воздействие на поля input рушит подсчет. Я же пробовал и дублирующие поля к первому input привязывал маску а во втором дублировались данные из первого вместе с маской тоже ничего не выходит, что то в самом скрипте не так но не знаю что. Почему то он выполняется только если на input действует только одно правило.
     
  5. rodent90

    rodent90 Новичок

    С нами с:
    26 мар 2015
    Сообщения:
    533
    Симпатии:
    37
    Чего?
    Показывай, что делаешь.