Как подружить скрипт с маской - JavaScript, Ajax

alexgrenn · 31.03.2015, 09:00

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

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

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

Код HTML:

<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 
  </style>
   <script>
    function cost(run, end) {
    var lunch = [(new Date()).setHours(12, 0, 0, 0),(new Date()).setHours(12, 45, 0, 0)]
    run =  (new Date()).setHours(run[0], run[1],0,0);
    end =  (new Date()).setHours(end[0], end[1],0,0);
    run > lunch[0] && (lunch[0]=run);
    end < lunch[1] && (lunch[1]=end);
    if(run > lunch[1]||end < lunch[0]||run > end) return 0;
    return (lunch[1] - lunch[0])/60000 ;
};
    document.addEventListener("input", function(event) {
    var el = event.target;
    if (el.classList.contains('time')) {
      var inp =  document.querySelectorAll('.time');
      if (inp[0].value.length != 5 || inp[1].value.length != 5) return ;
         var run =  inp[0].value.split(':'),
          end =  inp[1].value.split(':');
          inp[2].value = cost(run, end)
 
    }
});
 
  </script>
</head>
 
<body>
<input type="text" class="time">
<input type="text" class="time">
<input type="text" class="time">
</body>
 
</html>

mv28jam · 31.03.2015, 09:46

Цитата:

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

Ну так сделайте 4 поля ввода для времени...

alexgrenn · 31.03.2015, 10:09

Четыре поля не подходят, так как данные после попадаю в базу данных, а если будет четыре поля то это уже будет не sql формат и форма отправки не сработает

Serge_Bliznykov · 31.03.2015, 10:43

Цитата:

Сообщение от alexgrenn

Четыре поля не подходят, так как данные после попадаю в базу данных, а если будет четыре поля то это уже будет не sql формат и форма отправки не сработает

простите меня за возможную невежественность.
Но кто мешает при отправке данных слить поля вместе в том же JS ?

alexgrenn · 31.03.2015, 15:25

Так вот получается что любое дополнительное так сказать воздействие на поля input рушит подсчет. Я же пробовал и дублирующие поля к первому input привязывал маску а во втором дублировались данные из первого вместе с маской тоже ничего не выходит, что то в самом скрипте не так но не знаю что. Почему то он выполняется только если на input действует только одно правило.

Fenex · 01.04.2015, 03:38

Цитата:

Так вот получается что любое дополнительное так сказать воздействие на поля input рушит подсчет.

Потому что вы написали код для двух полей. А вы перепешите код для четырёх полей, и всё будет работать.

31.03.2015, 09:00	#1
alexgrenn Регистрация: 05.08.2014 Сообщений: 3	Как подружить скрипт с маской Здравствуйте очень нужна помощь Ситуация такая есть скрипт который высчитывает время если промежуток временной попадает от 12:00 до 12:45 то в третьем поле пишутся минуты которые попали в этот промежуток к примеру в первом поле 12:10 во втором 12:20 в третьем поле появится 10 Но время приходится вбивать вручную так как маска ввода --:-- она хоть и работает но время в итоге не считается а без маски все работает. Но маска нужна ну или какая нибуть альтернатива чтобы время можно было забивать без ручного ввода ":" этих точек. Вот сам код https://jsfiddle.net/alexgrenn/wqz18pf8/ Код HTML: <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script> function cost(run, end) { var lunch = [(new Date()).setHours(12, 0, 0, 0),(new Date()).setHours(12, 45, 0, 0)] run = (new Date()).setHours(run[0], run[1],0,0); end = (new Date()).setHours(end[0], end[1],0,0); run > lunch[0] && (lunch[0]=run); end < lunch[1] && (lunch[1]=end); if(run > lunch[1]\|\|end < lunch[0]\|\|run > end) return 0; return (lunch[1] - lunch[0])/60000 ; }; document.addEventListener("input", function(event) { var el = event.target; if (el.classList.contains('time')) { var inp = document.querySelectorAll('.time'); if (inp[0].value.length != 5 \|\| inp[1].value.length != 5) return ; var run = inp[0].value.split(':'), end = inp[1].value.split(':'); inp[2].value = cost(run, end) } }); </script> </head> <body> <input type="text" class="time"> <input type="text" class="time"> <input type="text" class="time"> </body> </html>

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как подружить swscanf и wchar_t	monolit111	Общие вопросы C/C++	0	18.09.2012 19:55
Как подружить Ribbon и Alpha Controls	artemavd	Компоненты Delphi	0	17.06.2012 17:44
Как подружить условия раскраски в DBGridEh	artemavd	Общие вопросы Delphi	2	08.05.2012 18:31
Как подружить SendMessage и TIdHTTP	zcoder	Работа с сетью в Delphi	1	13.04.2009 06:01

31.03.2015, 10:09	#3
alexgrenn Регистрация: 05.08.2014 Сообщений: 3	Четыре поля не подходят, так как данные после попадаю в базу данных, а если будет четыре поля то это уже будет не sql формат и форма отправки не сработает

31.03.2015, 15:25	#5
alexgrenn Регистрация: 05.08.2014 Сообщений: 3	Так вот получается что любое дополнительное так сказать воздействие на поля input рушит подсчет. Я же пробовал и дублирующие поля к первому input привязывал маску а во втором дублировались данные из первого вместе с маской тоже ничего не выходит, что то в самом скрипте не так но не знаю что. Почему то он выполняется только если на input действует только одно правило.