Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Динамический калькулятор

Автор: Axiom 31.1.2011, 15:52

Всем доброго!
Пишу скрипт следующего типа:
Юзер в input#num вводит какую-либо цифру. Скрипт автоматов выдирает её и множит, допустим на 2.

Код


$('#num').keypress(function(e) {
   var e = event || window.event;
   if(e.keyCode == 48 || e.keyCode == 57) {
      alert(parseInt($(this).val())*2);
   } else {
      return false;
   }
});

Когда ввожу число, то алерт выводит пустое значение. Но если ввести еще одно, то выводит предыдущее значение.
Подскажите в чем проблема. Почему так происходит?

Автор: ksnk 31.1.2011, 17:42

Цитата(Axiom @ 31.1.2011, 15:52

)

Подскажите в чем проблема. Почему так происходит?

потому что изменение в инпуте из которого читается значение еще не произошло. Так уж сложились обработчики событий.

Один из способов решения - отложить обработку вычисления на какое-то время

Код


$('#num').keypress(function(e) {
   var e = event || window.event;
   if(e.keyCode == 48 || e.keyCode == 57) {
      var me=$(this);
      setTimeout(function(){alert(parseInt(me.val())*2); me=null;},10);
   } else {
      return false;
   }
});

Другой способ - перенести вычисление на метод keyup.

а зачем там возвращается false?

Автор: Axiom 31.1.2011, 17:57

Теперь почему-то вообще не работает. Даже алерта нет.
Пробовал и .keypress и .keyup.

Цитата(ksnk @ 31.1.2011, 17:42

)

а зачем там возвращается false?

Это я как-то на автомате. По сути этот блок можно пропустить...

Код


$('#num').keyup(function(event) {
   var e = event || window.event;
   if(e.keyCode == 48 || e.keyCode == 57) {
      var me=$(this);
      setTimeout(function(){alert(parseInt(me.val())*2); me=null;},10);
   }
});

Также пробовал без тайм-аута.

Есть, конечно, вариант через post-запрос скормить значение инпута, php:

Код


$('#num').keypress(function() {
   var val = $(this).val();
   $.post('proc.php', {num:val}, function(data) {
      alert(data);
   });
});

proc.php

Код


echo $_POST['num'];

Таким образом всё работает, но это страшный велосипед. smile

Автор: ksnk 31.1.2011, 19:14

для jquery var e = event || window.event; тоже можно пропустить. Событие уже правильно оформлено и так.

Код


<input id="num" type=text>

<script src='jquery.js'></script>
<script>
$('#num').keypress(function(e) {
   if(e.keyCode == 48 || e.keyCode == 57) {
      var me=$(this);
      setTimeout(function(){alert(parseInt(me.val())*2); me=null;},10);
   } 
});
</script>

вот такое у меня исправно работет. Алерт есть.

Автор: Axiom 31.1.2011, 19:54

Разобрался.
Обработчик .keypress привязывался к узлу input, до его появления в структуре dom.

ksnk,
Спасибо smile

Твой последний пример и указал на мою ошибку. =)