text-transform: lowercase; not allowing pattern validation

[JZL]

Describe the bug
Hi,

I really enjoy this service! It fit my exact use-case of personal-grade short url expansion and has already come in handy many times to make adhoc short urls (no more fighting taken bitly urls)

The short url only allows lower case letters but if you type capital letters (on purpose or b/c mobile keyboards automatically capitalize the first letter) then $('#shortUrl').value still has the full capital letters. This doesn't allow the html pattern="[a-z0-9\-_]+" to pass, making it impossible to submit. But because of

form input[name="shortUrl"] {
    text-transform: lowercase;
}

it's shown to the user as lowercase.

I don't know what the easiest way to fix this is, maybe trigger onchange events which has javascript lowercase the inputs. Or not have the CSS so the user can fix themselves.

How to reproduce

Put capital letters in shorturl field

[SinTan1729]

Hi @JZL. Thanks for the bug report. I chose to disable the CSS changing to lowercase. This will give more uniform behavior across all unsupported characters.

Please test if this fixes your issue, and let me know. The test build is available at the docker image tag chhoto-url:dev. Feel free to reopen if you're still facing it.

[JZL]

Hi,

Cool that's perfect thanks for the prompt response! This works so it's clear what to fix, but could you also add autocapitalize="off" to the input, just to make it uncapitalized automatically on mobile? (tested myself, works)

Really enjoy using, sorry for the nit

[SinTan1729]

@JZL Thanks for the suggestion. I can do that. I'm not a web dev (not a profesional dev at all, lol), so the suggestions are really helpful.

Edit: Added in f772475.