如何在用户关闭弹出窗口之前检测iOS7选择菜单上的更改事件？ [英] How to detect a change event on an iOS7 select menu, before the user closes the popup?

问题描述

在iOS 7上，< select> Mobile Safari中的菜单在用户点击完成之后才会触发更改事件。当用户的选择发生变化时，我还可以听取其他任何事件吗？

On iOS 7, <select> menus in Mobile Safari do not fire a change event until after the user clicks "Done". Are there any other events I can listen for to know when the user's selection has changed?

<select onchange="alert('This will not fire until the user clicks Done')">
    <option>1</option>
    <option>2</option>
</select>

推荐答案

以前无法确定新的选择值用户触摸完成。

There is no way to determine the new selection value before the user touches "Done".

当用户第一次触摸< select> 控件时，iOS会打开选择选项的本机UI。这不是DOM。当用户触摸完成时，它会发送新的值/索引并在DOM上激活相应的事件。

When the user first touches the <select> control, iOS opens a native UI for the select options. This is not DOM. And when the user touches "Done" it sends the new value/index and fires the corresponding event back on DOM.

您可以对此进行测试。只需设置两个事件： onfocus 将设置一个计时器并连续轮询 selectedIndex 直到 onblur 在触摸完成时销毁计时器。

You can test this. Just setup two events: onfocus will setup a timer and continuously poll for selectedIndex until onblur destroys the timer when "Done" is touched.

<select id="my-select" onfocus="checkSelectedIndex()" onblur="selectDone()">
    <option>1</option>
    <option>2</option>
</select>

var timer;
// timer setup on focus
function checkSelectedIndex() {
    timer = window.setInterval(function () {
        console.log('selected index:', document.getElementById('my-select').selectedIndex);
    }, 500); // 2 polls per second
}

// timer cleared on blur
function selectDone() {
    console.log('Selection changed!');
    if (!timer) { return; }
    window.clearInterval(timer);
}

此测试 ，您会看到即使您更改了UI上的所选项目;在您触摸完成（即最终消息发送到DOM）之后，记录的索引不会更改。

With this test, you'll see that even though you change the selected item on the UI; the logged index will not change until after you touch "Done" (which is when the final message is sent to DOM).

所以，您可以做的是; （有一些UX权衡）;而不是< select> 元素，创建一个自定义控件，弹出< div> 或< ul> 。这样，您就不会触发本机UI，用户也不会离开DOM。并且您将能够收听菜单和点击项目的事件。

So, what you can do is; (with some UX trade off); instead of a <select> element, create a custom control which pops up a list of options in a <div> or <ul>. This way, you'll NOT be triggering the native UI and the user will not leave the DOM. And you'll be able to listen to the events of the menu and clicked items.

只需确保您的控件感觉适合移动设备。

Just make sure your control feels mobile-friendly.

1. 在iOS设备上，转到：设置»Safari»高级并启用 Web Inspector 。


2. 在桌面Safari上，转到：首选项»高级，然后选中在菜单栏中显示开发人员菜单。一个名为 Develop 的新菜单项将添加到您的Safari菜单中。


3. 通过USB将您的iOS设备连接到您的计算机。


4. 打开要调试的页面（外部或本地主机URL）。


5. 从桌面Safari 开发菜单中，选择您的名称单击设备，然后单击子菜单中的应用程序名称。

1. On iOS device, go to: Setings » Safari » Advanced and enable Web Inspector.
2. On desktop Safari, go to: Preferences » Advanced and check "Show Developer menu in menu bar". A new menu item named "Develop" will be added to you Safari menu.
3. Connect your iOS device to your computer via USB.
4. Open the page you want to debug (an external or localhost URL).
5. From the desktop Safari Develop menu, select the name of your device and then click the application name in the submenu.

这篇关于如何在用户关闭弹出窗口之前检测iOS7选择菜单上的更改事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！