實時更新表格上的值

與我的其他問題（已回答）here略有關係，我想知道下面是否有可能（它可能是非常基本的，但我對JavaScript有點不高興）！實時更新表格上的值

所以我有2個輸入字段，其中用戶輸入東西到表單中。他們按「計算」，然後函數總計他們輸入的內容，然後分別爲每個值計算1,2和3％。它看起來是這樣的：

input 1%value
input 2%value
input 3%value
total total

有沒有辦法對我來說，能夠實時更新形式？所以，我的意思是，只要用戶在字段中輸入值，函數就會自動開始更新總值等值。我將如何去實現這一點，它可以完全用JavaScript來完成嗎？

感謝

的Kiz

2011-06-22 zik

爲觸發計算的每個字段添加一個'onblur'事件監聽器。 – Gary

感謝大家的所有答案，我會給這個想法一點點，但這裏的所有答案都很好。謝謝 – zik

AngularJS（angularjs.org）在數據綁定和處理許多其他任務方面非常有用，您應該仔細看看它。 http://docs.angularjs.org/guide/databinding –

如果你想顯示 '實時'（意味深長，當用戶鍵入）值，你可以使用KEYUP值：

問候，

最大

2011-06-22 14:21:05 JMax

非常感謝，因爲這正是我正在尋找並實施的內容。現在我只需要使用isNaN函數來阻止它返回NaN！ – zik

實際上排序，我只需要預先填充值爲'0'。很容易，當你知道如何！：/ – zik

沒有建立一個完整的答案你這裏有一些提示：

純JavaScript就需要像這樣使用.value從一個元素：

alert(document.getElementById('elementid').value);

如果你使用一個JavaScript庫作爲例子jQuery，你可以使用如.val()

編輯：您可以使用onchange事件處理的變化

2011-06-22 14:16:44 GeertvdC

'javascript as jquery' ??那是什麼意思？ jQuery是一個使用javascript – Neal

的庫，它是我的一個錯字。意思是「javascript庫爲jquery」。現在更新 – GeertvdC

謝謝你。 – zik

放在onBlur事件的事件處理程序。如果你有叫calculateStuff()一個Javascript功能，您的輸入元素可以引用這樣的：

<input name="something" type="text" onblur="calculateStuff();" value="">

的onBlur事件發生在用戶葉領域。如果您希望在發生鍵入時發生，可以使用onChange處理程序。

2011-06-22 14:19:08 Fosco

真棒我會試試這個。謝謝你的答案。 – zik

不會是實時的，那是在他們專注於別的東西之後，它應該是'onfocus =「calculateStuff（）;」'並且在任何情況下都應該避免內聯JavaScript。 –

是的。您應該在JavaScript中調用onkeyup/onchange事件來確定用戶是否鍵入了任何內容，並且在事件內部只需調用JavaScript函數即可通過執行數學運算並插入值來刷新表單。

您還可以添加其他事件偵聽器，如模糊等

它已經有一段時間了，所以我不能發佈任何可用的代碼，但谷歌是你的朋友在這裏。

2011-06-22 14:22:09 Maurycy

很簡單！不要使用按鈕，請將onChange="your_calculate_function()"屬性添加到每個輸入。

2013-11-24 04:18:20

回答