How to change the text direction of an element?

Question

On Facebook, for example, if you have chosen the Arabic language for your keyboard, the textbox automatically gets RTL direction.

How can I implement this on my web application? I don't know the method or property used.

Answer 1

You can use the CSS direction property to achieve this:

input{
  direction: rtl;
}

Update

To change the direction of the text dynamically based on the user input you can check the first character of input to see if it meets a given criteria, in this case a regular expression.

$('input').keyup(function(){
    $this = $(this);
    if($this.val().length == 1)
    {
        var x =  new RegExp("[\x00-\x80]+"); // is ascii

        //alert(x.test($this.val()));

        var isAscii = x.test($this.val());

        if(isAscii)
        {
            $this.css("direction", "ltr");
        }
        else
        {
            $this.css("direction", "rtl");
        }
    }

});

This is a basic example that uses ltr direction for ascii text and rtl for everything else.

Here's a working example.