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.

Autograph

#27976655 – Intramuscular

Do you mean characters from the Latin script or words from the English language? – Patricia

@TomBlodget alphanumeric characters (Latin). – Autograph

I want to prevent mainly keyboards in Hebrew. I don't mind if the user uses Spanish or something like this. – Autograph

You're going for a very specific behavior that isn't documented by the Web standards or by the browsers. I think you're going to have to write some Javascript, dude. It's the only way to ensure that it will work consistently on every browser. – Toxoid

So what you actually want to do is force the on-screen keyboard on mobile devices into English mode (at least by default) when the focus is on that particular text field? If so, I'd recommend editing your question (and especially its title) to make that more explicit. – Parted

For the benefit of other people who might be thinking in the same direction as me, I thought perhaps the lang attribute would work - from MDN "The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.". Emphasis mine. However, I tested this on Firefox and Chrome for android, and the lang attribute did not affect the keyboard that came up. Maybe this might work in other browsers/devices...? – Canaletto

Have you tried the HTML lang attribute? w3schools.com/tags/att_global_lang.asp – Derouen

Answer 1

In my opinion you have 2 options.

The first one would be to let the user input whatever they want, but use a validator in the backend that will only accept usernames with latin characters.

class UsernameValidator(validators.RegexValidator):
    regex = r'^[\w.@+-]+\Z'
    message = _(
        'Enter a valid username. This value may contain only letters, '
        'numbers, and @/./+/-/_ characters.'
    )
    flags = 0


class YourUser(User):
    username = models.CharField(
            _('username'),
            max_length=150,
            unique=True,
            help_text=_('Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.'),
            validators=[UsernameValidator()],
            error_messages={
                'unique': _("A user with that username already exists."),
            },
        )

The second would be to use some sort of JavaScript mask library, such as https://imask.js.org/ so you prevent users to insert any data that you don't want them to, but anyway, you should validate the data in the backend if you follow this approach

Disingenuous

Answer 2

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...

Cirro

Answer 3

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.

Lenticel

Answer 4

Sort of a brute force and hacky answer... and it will have side effects (such as limiting the range of characters you can use on the page - no emojis ☹) but you can use the charset meta tag and set it to something like US-ASCII.

<meta charset="US-ASCII">

You might be able to put the input fields/ form into an iframe with the limited character set.

Again, a hack of an answer.

Souse

This would exclude the prompts from being displayed in Hebrew. – Rosabelle