Note that there are some explanatory texts on larger screens.

plurals
  1. POMobile Safari: iframed form "next-input" on dropdown bug
    primarykey
    data
    text
    <p>Looking for some information here on a really strange bug. Myself and another colleague has been at this for awhile trying to fix it. I have looked at most if not all of the relevant SO posts but none seem to address this problem directly.</p> <p>We have a very simple mobile web form. The flow of this form is:</p> <pre><code>Select &gt; Input[type=text] &gt; Select &gt; Select &gt; Input[type=text] &gt; Button </code></pre> <p>Here is the problem. When a user on an ios device clicks the select, the form helper pops up and the user can select a value. </p> <p>If the user hits the "next" arrow in the form helper the "input" following is focused, the keypad opens and the user can type. However, none of the text input is added to the text input.</p> <p>This was verified by some jquery events on the element and some logging statements. The input is in fact receiving the focus and each of the keypress events on that input are being logged but no text?!?!?!?</p> <p>If the user taps the first select, clicks "done" (in form helper) and then manually clicks the following text input then the key entry works and the text shows in the input. </p> <p>This same bug happens in same exact fashion for the 2nd text input right before the button. If the user uses the "next" arrow button in the form helper no text is being appended to the actual input field.</p> <p>I have several "hacks" in mind that use javascript to force this to work but I would like to avoid that if I could. But all of them may introduce other bugs plus this is further hardened by mobile safaris treatment of focus, blur and click events.</p> <p>Any suggestions?</p> <hr> <p><strong>-- UPDATE --</strong></p> <p>I found someone with the same exact problem over on the apple support forums.</p> <p><a href="https://discussions.apple.com/thread/5527146" rel="nofollow">https://discussions.apple.com/thread/5527146</a></p> <p>Turns out it is related to the form being in an iframe. Also the first input clicked must be a dropdown to recreate the problem.</p> <blockquote> <p>Hi, Below is one of the link where i am facing the problem.<br> <code>http://182.74.28.109/H3G/Main.html</code> Steps to reproduce</p> <ol> <li>Click on the provider Dropdown.</li> <li>Select one item from the dropdown.</li> <li>Now instead of clicking on the "Done", Click on ">".</li> <li>This will move the cusor to Name field.</li> <li>Now try to enter some text on the text box.</li> <li>Text box will not allow anything to enter.</li> </ol> </blockquote> <p>This does not exist if the form is not in the iframe.</p> <p>I have confirmed through javascript that the input, after the "Next" button is pressed has focus. Also confirmed that the buttons being pressed are registering but for some reason the values are not getting appended to the input itself.</p> <p>This leads me to believe this is some sort of mobile safari bug, which means that it may be awhile until a fix comes out and even if one does... not all older devices will receive it (actually not sure yet if this exists on iOS legacy devices).</p> <p>I have a basic proof of concept that will detect the characters pressed, decode them and append them to the input but it is a hack at best. You can only go so far to simulate native functionality. I would have to also simulate special buttons, like the backspace and spacebar for certain inputs. As a last ditch fix I may implement a plugin that would accomplish this but it would probably not have all of the functionality of a native input. I would hate to go this route.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload