0

I have a pagination component. When the user taps the middle, I show a <input type="number" />, on iOS this shows a keyboard like the photo below.

There is just the "Done" button in the top right. I have no other fields so in the photo below, where we see the down chevron lit up, in my form its not lit up. Hitting "Done" does not trigger submit, or even the enter key in keydown or keyup. It triggers no key events. Is it possible to detect if it was hit and then submit the form?

I thought to use onblur and check e.relatedTarget, however its null even if tap outside of input in area that isn't focusable. So its not reliable way. I also have a cancel button, if this is tapped its unmounted right away, so again e.relatedTarget is null.

enter image description here

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • The 'done' button is actually just a 'hide keyboard' button, really, so no, you won't be able to detect that as the input doesn't necessarily lose focus because of this. I don't think you will be able to detect it like that. Or at all, really... – somethinghere Aug 16 '23 at 12:08
  • `onblur` is the event I am using for this purpose. You need `e.relatedTarget` to determine which element was focused last? In that case you could store the last focused element and use that as a workaround. – Taxel Aug 16 '23 at 12:19
  • `Hitting "Done" does not trigger submit` That does seem odd, can you show the code? – Keith Aug 16 '23 at 12:23
  • @Taxel - thanks, I was using `onblur` to detect if `e.relatedTarget` is null on blur, and in this case I was assuming the "Done" was hit. However also if tapping in empty area in document, `e.relatedTarget` is null. So not what was last focused, but was next focused. – Noitidart Aug 16 '23 at 12:24
  • Thanks @somethinghere - any workarounds you know of? Its been nightmare. – Noitidart Aug 16 '23 at 12:25
  • @Keith thats it, thats the code `` please try on iOS Safari. – Noitidart Aug 16 '23 at 12:25
  • Yes, submit won't fire anything, if that's all the code you have. For one, you don't seem to have a `form` tag, that will accept the `submit`.. – Keith Aug 16 '23 at 12:28
  • `done` _is not a submit button_ - submit buttons are in the bottom right and blue on the iOS keyboard. Done is basically just a "close keyboard" button, and it is expected to not give an event or be easy to detect, because it has no meaning to the application. There is currently no good way to detect whether the keyboard is open or closed. At most you can detect it like in this QA: https://stackoverflow.com/questions/47841986/detecting-the-opening-or-closing-of-a-virtual-keyboard-on-a-touchscreen-device – somethinghere Aug 16 '23 at 13:01
  • You could potentially _add_ a submit button to they keyboard instance as described in this answer: https://stackoverflow.com/a/75842595/2991619 – somethinghere Aug 16 '23 at 13:11

1 Answers1

0

I would expect onSubmit to fire, so I thought it might make sense to knock up a snippet to test.

I don't have an Apple, IOS to test one so others will need to check.

On Chrome, pressing Enter causes the submit as expected.

On Android phone, pressing the equivalent of done, causes on submit.

update: done is the equavalant of close keyboard on iOS.

If this indeed does not work with IOS, then I would say it's a bug that needs reporting to Apple devs.

document.querySelector('form')
  .addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('submit');
  });
<form>
  <input type="number" inputmode="search"/>
</form>
Keith
  • 22,005
  • 2
  • 27
  • 44
  • "Done" is _not_ a submit button, submit buttons on iOS are on the bottom right when filling in a form. Done just closes the keyboard, for which there currently are no good solutions to detect it. There are some hacks available though: https://stackoverflow.com/questions/47841986/detecting-the-opening-or-closing-of-a-virtual-keyboard-on-a-touchscreen-device – somethinghere Aug 16 '23 at 13:01
  • @somethinghere Like I said, I don't have an iOS device to test, if you run the snippet I've created on an iOS does no submit option appear, if not then I would say there is a bug in the iOS numeric input. The snippet above for me works 100% on Android, and you can submit from a numeric input, seems very odd that iOS have left that out. – Keith Aug 16 '23 at 13:08
  • _It is not a bug_ - the **Done** button is _not a submit button_. You can add a submit by adding something like `inputmode`, see this answer: https://stackoverflow.com/a/75842595/2991619 - Done only means "I am done typing", not "I will submit what I typed", and it's intentional. – somethinghere Aug 16 '23 at 13:11
  • @somethinghere Yeah, not saying `done` here is a bug, I don't use iOS so no idea what the interface is meant to be, on android it's more obvious what to press to dismiss the keyboard. The fact that a numeric input for `iOS` has no feature to submit from a numeric input I'm saying is a bug,. PC / Android and pretty much any browser it's possible, so why it's not possible with iOS baffles me.. :) – Keith Aug 16 '23 at 13:14
  • If you click through to the answer I found you can see that iOS does allow for an `[inputmode]` attribute which would add the button needed. But since submitting might submit the whole form by default, its not a good way to dismiss the keyboard by default. You click done and move on to the next input, unless the developer explicetely says "and here they can click submit", which makes sense. Anyways, that's how iOS has always operated and I do think it makes sense. – somethinghere Aug 16 '23 at 13:20
  • 1
    @somethinghere Yes, I did see that -> `inputmode="search"` But I would have thought that was text input, not numeric, but I'll update snippet and see if that fixes it, if it does, this could be the answer the OP is looking for. Testing on Android does not make any difference, and that's fine, fingers crossed iOS adds the GO and keeps the numeric input. – Keith Aug 16 '23 at 13:24
  • Thanks all for this research. I tested it out, add `inputmode="search"` removes the number keyboard :( - here is screenshot - https://i.imgur.com/m0mxP83.png – Noitidart Aug 17 '23 at 16:05
  • 1
    @Noitidart Yeah, I'm back to thinking this is a bug, Safari iOS just doesn't support implicit input on type number, looking at the HTML specs there should be no reason not too :( A quick google it looks like Safari on iOS and it's numeric input is a massive joke, so don't expect any changes even if you report it. It's only recently for example push notification has been made available, only took them 7 years after standards were released. And we all know why don't we, app store, cough, cough, money, money, cough, cough. – Keith Aug 20 '23 at 19:06