Is it possible to force a website input to be in English?

Question

I'm creating a website (Speedy Net) in 2 languages - English and Hebrew. I have an input field (the slug/username) which must be in English (alphanumeric Latin characters). When I enter the website from my mobile phone, I can write text in Hebrew. Is it possible to force the keyboard to be in English in this input field? I noticed that for the email address (email input) the keyboard is already in English.

Update: On the server side we do validate the input. I don't want to validate the input on the client side (with JavaScript) or prevent the user from typing Hebrew characters (this may be done later maybe), but I want to cause (force) the default keyboard language to be in English. I noticed that for the email and password, when I set their direction to ltr, the keyboard's default language is English. But not on the slug/username fields.

The email input is automatically validated to be in English by the browsers I tested. You can't use Hebrew characters there.

I searched and didn't find a similar question on Stack Overflow or elsewhere.

The slug field may contain any non-alphanumeric characters which are converted by the server to dashes. For example Aa=Bb!1@2#3$4%56 is converted by the server to aa-bb-1-2-3-4-56, which is a valid slug of a user on Speedy Net. However, אא-בב-1-2-3-4-56 is not a valid slug on Speedy Net. A slug of a user must start with at least 4 Latin letters.

The problem arises when the page is in Hebrew. If the page is in English, there is no problem.

In my website when typing the first & last name, the user can type in any language. When typing the email address (email input), the keyboard switches automatically to English (tested on Galaxy). But when typing the slug/username (which is after the email address), the keyboard switches back to Hebrew if it was in Hebrew before the email input (on Galaxy). This is what I want to prevent.

Answer 1

You cannot force the language itself (a text input only knows characters, it knows nothing about languages, and actually a username is a rather arbitrary sequence of characters, not necessarily an existing word in an existing language), but you can restrict the allowed characters to ascii (which is actually your real need).

On the backend side (django), you can use the existing code for slugs (cf models.SlugField and validators.validate_slug), or write your own validator for more specific needs.

On the front-end side, you can go for some plain old-school solution like this one, or use the pattern attribute of the input.

NB: note that I didn't vote to close your question as a dup because of the django-specific backend part, but you really should have searched before posting your question as there are already quite a few similar questions here and elsewhere...

Answer 2

In terms of validation, "pattern" attribute of <input> element is widely supported and offers pure-CSS validation.

In terms of showing the correct on-screen keyboard, I think [mis]using type="email" in combination with above is your best bet at the moment* - out of all supported types it's the only one that auto-switches to Latin while allowing alphabetical input - while the browser would ideally take a hint and not show a regional keyboard if the pattern forbids that range, specification does require any specific effort in this regard.

input:invalid {
outline: 2px solid red;
}

<input placeholder="username" title="English only!" pattern="[\x00-\x7F]+"/>

* that is, short of radical solutions like constructing a custom OSK out of DOM and JS and suspending the system OSK by immediately giving a non-input element focus.