crosswords-js
crosswords-js copied to clipboard
dwmkerr
Stop using <input> fields
Hi again! A problem that crosswords-js (and some other HTML-based crossword software I've come across) has is that on iPhone, using an input field opts in to some unwanted functionality (it may also happen on Android). For example, when you tap on the current cell to switch from across to down, a popup appears offering for you to "Select" the text in the input:
Also, for users with dark mode enabled, Safari iOS automatically changes the input background to be dark, making the difference between light and dark cells almost invisible:
Both of these could be controlled for by using a div or span with a keypress listener. This is, I think, roughly what squares.io does:
squares.io:
The Guardian uses an input, but is somehow hiding it so it's not clickable. They use some kind of customised HTML tags to actually show the entered letter:
I think the squares.io approach would be easier! I'd be happy to submit a pull request making this change after #42 is in, if you'd be open to it @dwmkerr and @pvspain ?
(Side-note: the modified styling in the first couple of screenshots is taking advantages of the overridable CSS variables in #41!)
(Side-note: the modified styling in the first couple of screenshots is taking advantages of the overridable CSS variables in #41!)
Nice. What's that font you're using? Very stylish!
Hi @mmkal,
I've been thinking about the selectability of the inputs for a while. What you're proposing - using a <div> - may work. There is quite a bit of work to implement and test.
- Three keyboard event handlers.
- Rendering and styling within the element. Inputs have quite a few properties.
- Accessibility issues to research.