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.