iOS: Show a fully functional numeric keyboard ( input[type=number] ) #16

georgealways · 2021-11-17T22:00:07Z

I was hoping to avoid <input type="number"> for NumberController. We're not using any of its stepping / clamping, the alt messages it shows on invalid entries are distracting, and there's a fair bit of CSS required to get rid of the native styles.

Still, it's important that mobile users get a numeric keyboard by default when focusing a number field. Up until now I had hoped to accomplish that with <input type="text" inputmode="decimal">. That's enough on Android, but naturally iOS must be difficult.

The iOS keyboard doesn't have a negative symbol with inputmode="decimal". Strangely, it's not required. From the MDN docs on inputmode decimal:

Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically . or ,). Devices may or may not show a minus key (-).

The only way to default to a fully functional numeric keyboard on iOS is with <input type="number">. I'm not excited about changing something foundational like this, but so far I haven't been able to distinguish between the two input types. I wish it wasn't necessary, but I think the change is justified: iPhones are popular.

juliangarnier · 2022-12-10T14:39:10Z

@georgealways One side effect of this change is that Chrome will display decimal values using comma as a separator instead of a period depending of your OS regional settings (I think ?).
In my case I'm using macos with french keyboard settings, every number inputs in chrome show 12,34 even if the actual value of the field is 12.34.
This is really annoying as it prevents me from directly copy/pasting values from the gui to my code without having to manually replace the comma with a period.

My workaround for now is to convert the inputs back to type=text by calling

  gui.controllersRecursive().forEach(controller => {
    if (controller.$input && controller.$input.type === 'number') {
      controller.$input.type = 'text'
    }
  });

everywhere I add new controllers in my code.

But every demo on the web that use lil-gui will always show me coma separated values.
This is straight from the three.js docs :

Do you have a better solution to my workaround?
Maybe adding a flag in the constructor to use input type text instead of number would solve this ?

Let me know if you need more info or if you're interested by a PR.

Thanks

georgealways · 2022-12-10T16:59:46Z

I see... It looks like you might be able to add a lang="en" to the input[number] elements to force it to use a period for decimals. That would be ideal because it would work for everyone, please feel free to give that a shot.

juliangarnier · 2022-12-13T16:45:54Z

Unfortunately adding lang="en" to the input doesn't seem to have any effect.
And the document was already using <html lang="en"> so I think Chrome is using the OS settings and not the document itself.
I looked at a few other gui libraries and they all use text input apparently...

georgealways · 2022-12-15T16:09:19Z

Ah, bummer—thanks for trying that out though.

So I'm not sure what to do here yet. One of the main goals for lil-gui was being easier to use on mobile than dat-gui was. Setting this back to type=text would add an extra tap to every interaction with the number input.

Hopefully the snippet above can get you by for now. Let's leave this open if others want to chime in.

juliangarnier · 2022-12-15T18:13:20Z

So I'm not sure what to do here yet. One of the main goals for lil-gui was being easier to use on mobile than dat-gui was.

I'm using the slider most of the time to interact with numbers, especially when I'm debugging on mobile.
Not saying that I'll never type a number manually, but copying the value from the field into my code is definitely what I do most with number inputs.
And having to re-format the value in my text editor every time is really slowing down my process.

Hopefully the snippet above can get you by for now. Let's leave this open if others want to chime in.

Well it kind of works for my own projects, but more importantly, this means that everyone browsing the three.js examples (or any other demos with lil-gui) using Chrome from a country where a comma is used as decimal mark, will get badly formatted decimal values...

Unfortunately until Chrome adds a way to chose which separator to use for decimals (like Safari or Firefox), I would recommend using an input text instead as the default for displaying numerical values.

But I can think of two workarounds that might solve the issue on mobile:

Detect if the user is using a touch screen and choose the input type number only if touch is detected.
Or set the default number field type to text, and change it to number on touchstart: https://codepen.io/juliangarnier/pen/LYrwBQZ/b01bfdd6433d0da5530185e2b09c5166

Since Chrome on iOS is running Webkit it won't be an issue to set the type to number.
The only edge case I can think of is laptops with touch screens running Chrome desktop.
Otherwise these workarounds should fix the issue for the majority of the users.

Let me know what you think and if you're interested in a PR?

georgealways added 3 commits November 13, 2021 09:02

move to input type number, allows neg numbers on ios

ee8a6e8

Merge branch 'dev' into typenumber

236ad2e

Merge branch 'dev' into typenumber

1431e40

georgealways merged commit 89917f0 into dev Nov 17, 2021

georgealways deleted the inputtypenumber branch November 17, 2021 22:02

georgealways mentioned this pull request Nov 22, 2021

0.14.0 #18

Merged

juliangarnier mentioned this pull request Dec 19, 2022

Number Controller: use period instead of comma for decimal point regardless of locale settings #79

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS: Show a fully functional numeric keyboard ( input[type=number] ) #16

iOS: Show a fully functional numeric keyboard ( input[type=number] ) #16

georgealways commented Nov 17, 2021 •

edited

Loading

juliangarnier commented Dec 10, 2022

georgealways commented Dec 10, 2022

juliangarnier commented Dec 13, 2022 •

edited

Loading

georgealways commented Dec 15, 2022

juliangarnier commented Dec 15, 2022 •

edited

Loading

iOS: Show a fully functional numeric keyboard ( input[type=number] ) #16

iOS: Show a fully functional numeric keyboard ( input[type=number] ) #16

Conversation

georgealways commented Nov 17, 2021 • edited Loading

juliangarnier commented Dec 10, 2022

georgealways commented Dec 10, 2022

juliangarnier commented Dec 13, 2022 • edited Loading

georgealways commented Dec 15, 2022

juliangarnier commented Dec 15, 2022 • edited Loading

georgealways commented Nov 17, 2021 •

edited

Loading

juliangarnier commented Dec 13, 2022 •

edited

Loading

juliangarnier commented Dec 15, 2022 •

edited

Loading