iPhone上的下拉菜單中的'next'不會在更改事件上觸發

我正在嘗試爲移動Safari瀏覽器做一個簡單的級聯下拉菜單。我在safari本身有100％的工作，這顯示了正常的風格下降。但移動Safari瀏覽器下拉菜單有一個「下一個」按鈕。iPhone上的下拉菜單中的'next'不會在更改事件上觸發

擊中這下按鈕將下一個下拉與觸發的onchange（）級聯 - 因此未來下拉列表是空的。

用戶被迫按'完成'觸發更改，然後單擊下一個下拉菜單。

有沒有人知道解決這個問題的方法。或者手機safari的'下一個'觸發了什麼DOM事件？

2011-05-17 Phillip Jones

只是要注意的（搜索引擎優化的目的也），人們可能會將這到jQuery或jQuery的移動或其他JavaScript庫，但如果這仍然是一個問題，今天（這是我們的），那麼它肯定會很高興聽到一個解決方案。 – iJames 2011-10-11 01:06:58

這個問題的一個有趣的解決方案是**停用下一個和上一個按鈕**。在這樣的嘗試已經在這裏提供： http://stackoverflow.com/questions/7472465/disabling-previous-and-next-buttons-in-mobile-safari – iJames 2011-11-09 20:42:39

從[此帖]（HTTP插件： //stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-onchange-js-event-when-using-next-on-m/7284325#7284325）爲我工作。它似乎是加載第二個列表，只要你在第一個列表中選擇的項目，而不是等到用戶點擊'下一個'或'完成' – Billy 2011-11-16 16:51:18

這是一個iOS原生覆蓋圖，所以當覆蓋圖出現時，您會得到一個模糊事件。嘗試使用模糊事件，看看它是如何工作的。

來源

2011-10-25 16:24:19 vernonk

從我可以告訴，這不是骰子。我嘗試了模糊處理，甚至專注於第二個下拉菜單。在iOS 5的這兩種情況下，疊加層似乎都會在更改/模糊/焦點事件之前捕獲下拉選項，因此不會允許更新下拉菜單，從而不允許iOS杯子更新。仍然希望有一個解決方案。 Vernon，你對這個iOS原生覆蓋圖有什麼其他想法嗎？謝謝！ – iJames 2011-10-28 01:14:38

我想知道是否有可能發生其他事情。這是我在iPhone上設置和測試的jsFiddle。 http://jsfiddle.net/Wjbxt/1/在第一個下拉列表中進行選擇並更新預覽中的值後，點擊下一個時，更改事件就會觸發。我在iOS 5上，測試一下，讓我知道你得到了什麼。 – vernonk 2011-10-28 13:35:47

此更新（http://jsfiddle.net/Wjbxt/2/）會將所選值預加到第二個下拉列表中。這不會立即發生。如果我先前再回到第二個下拉列表，那麼值就在那裏。它只是沒有立即拾起。肯定需要更多的研究。 – vernonk 2011-10-28 13:40:17

我已經嘗試了許多直接解決方案來解決這個問題沒有成功。第二個下拉列表填入之後 Safari Mobile的「表單助手」覆蓋圖出現了微調器（在文檔中稱爲「選擇器」 - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html）。所以選擇器被填入舊值。

在另一情況下，如果第二級聯下拉是無效的，形式助理的下一步按鈕右側超過它跳過。但是，在這種情況下，一旦下面的表單元素登陸，第二個下拉菜單就會正確更新自己，因此在那一點上點擊「前一個」會在選擇器中給出正確的列表。

我的「答案」是Apple建議不要使用基於JavaScript的級聯下拉菜單，但要實現另一個UX，儘管我沒有發現任何與標準jQuery Mobile類型的分頁菜單相關的內容。

來源

2011-11-09 20:41:03 iJames

禁用第二滴從一開始就下是唯一的解決辦法我迄今發現！你選擇和使用JavaScript或者jQuery來啓用或禁用它，將禁用iPhone上的「下一步」按鈕

添加禁用ATTR（禁用=「禁用」）。

這裏是jQuery代碼

$(".DD1").focus(function() { 
    $('.DD2').attr('disabled', 'disabled'); 
}).blur(function() { 
    $('.DD2').removeAttr('disabled'); 
});

這裏是使用這樣

jQuery的一個活生生的例子： http://www.imotors.com/mobile

來源

2012-07-03 22:06:35 Parham

iPhone上的下拉菜單中的'next'不會在更改事件上觸發

回答

相關問題