Reverse text direction for HTML input

Question

For my website, I need Arabic language support. Part of this is to provide an input text box where as the user types new characters must be appended to the left and the text must be right aligned.

Set the CSS property to

text-align:right

didn't work because I couldn't move the cursor to the left and add letters there. So I removed that attribute and added

direction:RTL

Here, the cursor is moved to the left and the text is right-aligned. But the newly added characters are not appended to the left side, but only to the end of the right side.

How do I fix this problem? Please help..

For example, check out the search box on Google’s Arabic page. I need the exact same behavior, albeit without those fancy keyboard icons etc, http://www.google.com/webhp?hl=ar

Answer 1

You can use dir="rtl" on the input box. It is supported.

<input dir="rtl" id="foo"/>

Answer 2

This is what I can think of:

• Use direction:RTL for right alignment
• Write a JavaScript handler attached to the event "onkeyup" that moves the entered characters to the left (does some text processing).