search

dwmkerr / crosswords-js

Tiny, lightweight crossword control for the web.
https://dwmkerr.github.io/crosswords-js/
MIT License
71 stars 27 forks source link

Stop using <input> fields #43

Open mmkal opened 8 months ago

mmkal commented 8 months ago

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:

image

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:

image

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:

image

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:

image

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!)

pvspain commented 8 months ago

(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!

dwmkerr commented 8 months ago

The suggestion makes sense sure I'd be happy for a PR!

pvspain commented 8 months ago

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.