How To Enable Typing For Non-english Characters In A Html Textarea?

I have installed Arabic web fonts on my website. But when I type anything in a Textarea I see English characters. When I Copy Arabic characters from another website and paste into

Solution 1:

you need to change the Keyboard language. Depending on the operating system you must find how to set your keyboard input from standard US to Arabic. On Windows 8 you go to Control Panel -> Change input methods -> Add a language on Windows 7 and Vista check out the following How to change your keyboard layout. Also I am assuming you have included <meta charset="UTF-8"> in your HTML file.

Solution 2:

To enter Arabic characters on your keyboard, you need to use a keyboard layout (keyboard driver) that allows such typing or to use some other (system-dependent) input method.

But as you probably mean how to make it possible to your visitors to enter Arabic text, that answer is not that useful.

Generally, you can expect that people who can and wish to type Arabic text are using devices and software that make it possible to them to do so. You do not need to do anything except 1) the usual thing of using UTF-8 encoding for the page and declaring it (or, if that is not possible, at least using accept-charset=utf-8 for the form element) and 2) the special thing of setting dir=rtl on the textarea element if it is expected to contain (dominantly) text in Arabic letters or another right-to-left writing system.

However, it is possible that a user who can and wishes to write in Arabic letters is using a non-Arabic keyboard layout, e.g. a US keyboard at a hotel. He might even have no way of changing keyboard layout. You may therefore consider using one of the following techniques (not mutually exclusive, but using both might be confusing):

1) Set up a virtual keyboard on your page, i.e. a set of elements that look like keyboard keys and act so that when you click on one of them, the character shown in it gets appended to the textarea. This is relatively straighforward and does not take much time to code for a relatively small alphabet like the basic Arabic letters. Many sites use such techniques.

2) Set up handlers for keyboard events so that e.g. when a user presses a key that normally produces the letter “a”, your code intercepts it and inserts, say, the Arabic letter ʾalif instead. This is somewhat more complicated due to differences between browsers in handling keyboard events. The main problem, however, is that you cannot know the type of the keyboard used. The user might have a keyboard layout that lacks all Latin letters at least in the primary positions. Moreover, the user might want to type a word in Latin letters, e.g. a proper name in the midst of Arabic text.