Using HTML 5 to change the keyboard language on mobile devices

Question

I have bilingual HTML 5 form, and I am using the type attribute to help change the keyboard layout for mobile devices.

<input type="tel" />
<input type="email" />
<input type="?" />

This is working fine, as the tel value is showing a numbers keypad, and the email is showing a custom keyboard for email typing.

But I'm wondering if there is a way to specify the language of the input, so the device switches to the appropriate keyboard ?

I've randomly tried this :

<input type="text" lang="ar" />

But nothing happened, is this even possible in HTML5 or Javascript ?

Thanks @mplungjan for the tip, unfortunately, I already did, nothing matches my question. — TheByeByeMan, Feb 21 '20 at 11:11
Does this answer help you? https://stackoverflow.com/a/53910703/1356107 — Tschallacka, Feb 24 '20 at 09:49
@Tschallacka, I've already implemented this for desktop. It's working fine, but it doesn't make sense for mobile keyboard. — TheByeByeMan, Feb 24 '20 at 16:44

score 7 · Accepted Answer · answered Feb 21 '20 at 15:12

I think this's not really possible ,the problem you will encounter is that the keyboard is itself an application depends on the users locale , therefore you cannot change it directly from your web html page, nor can you guarantee that your user will have the "Arabic" charset and the keyboard depends alos on mobile device OS

Here's an example for html mobile input type :

http://mobileinputtypes.com/

score 3 · Answer 2 · answered Feb 25 '20 at 08:50

In extend to e2rabi and Srikara B S, it's indeed not possible but there might be a workaround.

In one of the applications that's being build by my employer, they wanted a strict character set to be used. They basically set all inputs to contain the disabled property, and on click(touch) render a custom keyboard. Because of the disabled attribute the keyboard won't trigger, and using (basic) Javascript you can fill the input with the keys used on your custom keyboard.

This isn't the most viable method, but since you can't force a users keyboard language (especially since an OS like Android allows custom keyboards), it might be your only option if you want to force a specific keyset or scheme/layout.

Divyanshu Agarwal · Answer 3 · 2021-04-08T09:14:05.630

Lang attribute was proprietary feature added by Microsoft to its Internet Explorer browser. It referred to scripting language not. It was used to identify what language to use to interpret scripts.

Read more: https://html.com/attributes/input-language/#ixzz6F9qYpJJ9

If you want to open keyboard in a particular language you cant do directly in web application.

But you could create your custom modals which will work as keyboards for different languages(look and feel should be of real keyboard but is not a generic device keyboard ). In this scenario when user clicks on input field you could trigger your custom modal to open. Generally in above scenario device keyboard will also be triggered. This can be stopped using inputmode='none' <input type="text" inputmode="none" /> Refer: https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

score 2 · Answer 4 · answered Feb 24 '20 at 09:48

2

There is no way you can change the keyboard language from a browser. It is dependent on the user preferred language on local device. Probably you can give the user a translator on the side and take the input

answered Feb 24 '20 at 09:48

Srikara B S

69
4

Using HTML 5 to change the keyboard language on mobile devices

4 Answers4