2013-03-14 67 views
1

我有一個戀物癖建立在線計算器沒有大'計算'按鈕。即計算髮生在沒有用戶點擊計算按鈕的改變事件上。不幸的是,許多用戶只需輸入數據並向下滾動即可查看結果,而無需在屏幕上的其他位置標籤或點擊。此行爲不會觸發更改事件,因此結果不會更新。檢測表單輸入更改完成

這裏有一些情形,其中我考慮用戶輸入完成:

  1. 用戶輸入數據和標籤輸出(變化)
  2. 用戶輸入數據,並從文本框出移動鼠標(按鍵/輸入其次是鼠標)
  3. 用戶標籤到輸入字段,輸入數據並將鼠標移動到其他地方的某個距離。即,鼠標在任何時間都不在輸入字段上。

執行#1 &#2應該很容易。我想看看如何最好地使用jQuery實現#3。是否有任何jQuery插件可用於幫助我完成上述所有操作或只是#3?或者,我是否應該放棄所有這些,並把一個大的計算按鈕?

+0

如果你確定用戶將總是要滾動到結果的div你可以檢查,當它是滾動和計算結果 – dakait 2013-03-14 09:48:53

+0

只是做關於變化,焦點,在鍵盤上的計算,也許檢測是否有人按下輸入..你會全部完成 – 2013-03-14 09:49:58

+0

爲什麼不只是使用'鍵入'的變化事件,並觸發時該頁面已加載? – 2013-03-14 09:54:43

回答

0

下面是一個簡單的計算器的例子,它更新每個輸入變化。 (該值是一個int,因此沒有添加的檢查。)

$('#num1, #num2').bind('keyup', function() { 
    if($('#num1').val() == '' || $('#num2').val() == '') { 
     $('h1 b').html(0); 
    } else { 
     $('h1 b').html(parseInt($('#num1').val()) + parseInt($('#num2').val())); 
    } 
}).trigger('keyup'); 

JsFiddle example

+0

由於上述原因,我無法使用keyup事件。 – Zero 2013-03-14 10:38:56

+0

正如我所提到的,添加檢查有效值..我沒有看到問題.. – 2013-03-14 10:49:00

+0

這並不回答這個問題。 – 2014-10-06 16:14:42