2015-04-01 42 views
0

如果例如我在購物籃中有一個輸入框詢問產品的數量,我想添加一個事件監聽器到<input type=number>字段中的數字右側的小按鈕,該數字更改數字據此並將更新價格。是否可以將一個事件偵聽器添加到數字輸入框中的小按鈕?

如果這是可能的,一個例子會很好。

謝謝。

EDITED

我也想留下清晰的jQuery請儘可能

+2

如果你的瀏覽器支持影子DOM,你可以只使用變化/輸入事件 – 2015-04-01 09:48:02

+0

,你也許能夠得到的按鈕。但大多數瀏覽器不。爲什麼輸入的變化*事件對你來說不夠? – Touffy 2015-04-01 09:55:04

+0

老實說我以前沒有聽說過這個變化事件,但現在我已經知道了,它是最合適的解決方案,謝謝大家! – Adam 2015-04-02 13:28:10

回答

2

您可以使用JavaScript更改事件:

document.getElementById("product").addEventListener("change", function(event) { 
    console.log(event.target.value); 
    }, false); 

DEMO

更新價格,其變化值產品編號:

document.getElementById("product").addEventListener("change", function(event) { 
    var product = parseInt(event.target.value); 
    document.getElementById("price").value = product *2; 
    }, false); 

DEMO

+0

+1這個解決方案。 我可以補充一點,這些小按鈕只依賴於瀏覽器,因爲它還是HTML5的參考。 許多瀏覽器都不會顯示任何小按鈕,直到有可能支持它的新版本。 – 2015-04-01 10:00:29

+0

@AlexPierstoval'input type =「number」'在大多數現代瀏覽器中均受支持。如果瀏覽器不支持HTML 5輸入類型,則它們將像常規文本字段一樣運行。然後改變事件將不起作用,所以你可以使用'keyup'事件。 – Manwal 2015-04-01 10:04:37

相關問題