I want change numbers font family in inputs when user type. for instance when user keyboard is Persian, numbers fonts be Persian and it change when user switch keyboard language to English.is there a way to do it?
1 Answers
You can use the navigator.language
property to get the current user language code, once this is done you can change the font globally or for an input element collection.
Note that Persian includes two language codes as far as I know, I am not a native speaker so you may have to investigate this further
- "fa": "Persian",
- "fa-ir": "Persian/Iran"`
// If you end up getting more language codes
const langCodes = ['fa', 'fa-ir']
const checkLang = (languages) => (
navigator.language === languages
// OR Use - https://stackoverflow.com/a/55206806/13749957
)
langCodes.some(checkLang)
if (checkLang) {
changeFont()
// where change font could change globally
// OR get a collection of inputElements and change the font.
}
Additional Notes
Based on the comment below on how keyboard layout may change the input language but not
navigator.language
the only way as correctly noted by @Peter Seliger, you have to then guess this by hacking achange
onpaste
combination to guess their keyboard layoutHere is an answer that attempts to guess the persian language characters post input (note that it does not include other scenarios such as paste) - https://stackoverflow.com/a/55206806/13749957
navigator.language
indicates browser preferred language but could differ fromos
language, however there are no standard API's that can provide you the info, this also seems a user error/preference which is hard to guess and would be an edge case - This answer discusses it in detail https://stackoverflow.com/a/3894527/13749957

- 2,919
- 1
- 5
- 21
-
The `navigator.language` most probably indicates the preferred language of a users client. The OP wants to dynamically change the styling of an input field as character (sequences) are put into the field, either pasted or from a virtual keyboard or from changed keyboard settings. Thus any approach merely/virtually relies on guessing the language from the typed/pasted characters. – Peter Seliger Apr 06 '22 at 14:14
-
i think navigator. language give me the browser language not os .am I right ? – Mahdi Zeynali Apr 07 '22 at 06:50
-
@MahdiZeynali - answer updated. – Ramakay Apr 07 '22 at 13:51