哪種事件類型應該用於「範圍」類型的輸入？

我有一個窗體，有幾個'範圍'類型的輸入，並有一個提交按鈕，直到每個範圍輸入觸發一個事件時纔會隱藏。我很好奇爲了這個目的選擇哪種類型的事件。哪種事件類型應該用於「範圍」類型的輸入？

如果使用「點擊」事件，一些較舊的瀏覽器（即Windows的Safari）將不會始終註冊這些事件。使用'mouseup'可能不是一個好主意，因爲在傳統瀏覽器或某些移動瀏覽器上，範圍輸入將作爲常規輸入框生成。做類似以下，根本不觸發運行在Android上的Opera瀏覽器（在其範圍內的投入呈現爲普通的文本輸入框）的事件：

$('#my_form input').on("mouseup change", function(){ ... }

所以我的問題是，該事件類型應我選擇在遺留，移動和現代瀏覽器上運行良好，並且可以避免上面列出的問題？

來源

2014-12-28 Boa

怎麼樣聽'change'事件？ – Terry

顯然Chrome和Safari是錯誤的：onchange應該只在用戶釋放鼠標時觸發。要獲得持續更新，您應該使用oninput事件，它可以從鼠標和鍵盤捕獲Firefox，Safari和Chrome中的實時更新。

然而，oninput不IE10支持的，所以最好的辦法是將兩個事件處理程序結合起來，就像這樣：

<span id="valBox"></span> 
<input type="range" min="5" max="10" step="1" 
    oninput="showVal(this.value)" onchange="showVal(this.value)">

看看這個Bugzilla thread以獲取更多信息。

來源

2014-12-28 22:24:14 KaMZaTa

謝謝。你的建議似乎可以在Safari上正常工作，但在Android上Opera並沒有做任何事情。如果你想查看一個測試頁面，下面是一個例子：http：//goo.gl/KKpzLk – Boa

我測試了Opera 11.10 Mini for Android，它工作正常。什麼是您正在測試的瀏覽器版本？ – KaMZaTa

使用Android Opera 18.0進行測試（完整版，非迷你版）。似乎在Opera Mini 7.5上也不行。 – Boa

您可以使用更改事件：

$('#my_form input').on("change", function(){ ... }

或：

$('#my_form input').change(function(){ ... }

如果瀏覽器呈現的範圍內輸入作爲普通的文本輸入這甚至會工作。

來源

2014-12-28 22:25:01 zukeru

謝謝 - 試了一下，但它在Windows Safari上很不穩定，並且在Android Opera上沒有做任何事情。 – Boa

如果它可能會在某些最舊的版本上運行。你有最新版本的jQuery嗎？ – zukeru

使用版本1.11.1 – Boa

哪種事件類型應該用於「範圍」類型的輸入？

回答

相關問題