JavaScript on iOS: opening an HTML picker

Question

I do not hope, but I will ask just in case.

I would like to be able to use JavaScript to open the select element in mobile Safari for iPhone / iPad.

A broad Google / Qaru search shows that many people would like to do this in browsers in general, but it is not supported (why not, I wonder?). Various hacks have been proposed by calling focus() on the select element and changing its size property to make more option elements visible or to create a fully mocked select element with <div> and <ul> elements. However, I would like to use my own browser to control the iPad and iPhone.

Interestingly, maybe someone might know about Apple's own WebKit method to do this. It will be something like:

 var myselect = document.getElementsByTagName("select")[0]; myselect.open(); // this method doesn't exist 

As a bonus, it would also be useful to know a logical property that says whether the selection item is currently open / active or not (i.e. not only whether the item has focus). I know that I can fix this by tracking the click and changing events, but a simple property would be useful.

Desired Thinking?

---

UPDATE:
I don’t have an answer yet, but I found that the mousedown simulation successfully opens a select item in Google Chrome, but not iPad or Firefox, and so on:

 function simulateMouseEvent(eventName, element) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent(eventName, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); element.dispatchEvent(evt); } simulateMouseEvent("mousedown", select); 

UPDATE:
I asked a related but different (and also unanswered!) Field selection question here: Is there a DOM event that fires when the HTML select element is closed?

Answer 1

Running HTML controls with JS is a very gray area, partly for security reasons, and partly due to lack of support. Even using frameworks like jQuery, you can't just click() use a link to follow it like click() on a button - you need to trigger your own click event at the browser level (I believe that the latest version of Selenium is, but this testing framework is so unsuitable for this problem). Congratulations on getting a partial result in Chrome! However, you will not find a universal solution that uses real inputs of choice.

I would suggest using a different type of control - a vertical button stack if you want to press one to activate a function, or a stack of switches, backed up with shortcuts (with a little CSS), if you want a multi-selected format.

Answer 2

I have a working solution for this that works with the latest versions of iOS and Android. I have not tested old versions yet. There are no two ways: this solution is hacking. But it works if it is implemented carefully.

In my situation, I had iOS 7 as a toggle switch element. I wanted the picker view for select appear when the switch is turned on. In my case, we do not need or do not need the user to see the select field. We just wanted to use the iOS 'nice scrolly-picker interface.

I used CSS to place and stretch select completely over the switch. Then I set opacity in CSS as something like opacity: .001; which makes it invisible to all goals and objectives. It can still work with opacity 0, but I felt like I was leaving a little opacity, maybe more secure, and you still can't see it all. Now, when the user takes away the area of ​​the screen on which the switch is displayed, pressing events actually go to select , which leads to the display of the type of selection.

In the onchange select event, I set display: none; to completely hide select . This means that when the user touches the switch to turn it off, they interact with the switch itself. When the switch is switched, I then display: block returns select to its active state.

My use case is limited, but the position / opacity method has to be adapted to many use cases, although you may have to have 2 select elements in cases where you want the field to be visible.

Here is a screenshot demonstrating the technique. The opacity value is set to 0.25 in this screenshot for demo purposes. When you set it to 0.001, you cannot see select

Answer 3

The select element must be visible. If you are using jQuery, you can do it like this:

 $('mySelectElementSelector').focus(); 

The mobile control will display the default control. On the desktop, just focus on the select control.

Answer 4

Have you tried the change() method?