Use jQuery to switch between left and right text-alignment, depending on the language

Question

I have input boxes and textareas that need to be toggled between left-alignment and right-alignment (depending on the user's language, the direction would be different). How can I do this with jQuery?

Answer 1

As I don't know the key code for all Persian letters, I had to do it like this:

var str = $('#item').val();  //this is your text box
var firstChar = str.substr(0,1);
var characters = ['ا','ب','پ','ت','س','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];
function checkPersian() {
    var result = false;
    for (i = 0 ; i<32 ; i++) {
        if (characters[i] == firstChar) {
            result = true;
        }
    }
    return result;
}
if (checkPersian()) {
    $('#item').css('direction','rtl');
} else {
    $('#item').css('direction','ltr');
}

Answer 2

Here I have completely overhauled Mohammad's script but it's limited to its purpose: scanning if the first letter the user types in is Persian and changing the inputs direction according.

Here it is: jsfiddle.net/uPH7N/4

Answer 3

You can use dir="auto" attribute in modern browsers: Live Demo

<input type="text" dir="auto"><br>

Also you can do it by jQuery like this: Live Demo

$('input, textarea').keyup(function() {
    $(this).val().charAt(0).charCodeAt(0) < 200 ? $(this).css('direction','ltr') : $(this).css('direction','rtl');
});