How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

Question

Example: if I use arabic language the text field direction will be rtl and if I want to write a new text and I switch to the English language the direction inside the text field (`text-align: left) will be ltr automatically

Answer 1

You could use the global HTML5 attribute dir with a value of auto here, like so:

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

From the specification:

The auto keyword, which maps to the auto state Indicates that the contents of the element are explicitly embedded text, but that the direction is to be determined programmatically using the contents of the element (as described below).

Note: The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied.

http://www.w3.org/TR/html5/elements.html#the-dir-attribute

As this quote suggests, it would be better to find out on the server side which direction should be used, but you can use this if you have no way of knowing it.

Answer 2

thanks for you help, I used javascript to resolve this problem , in this code I used jquery framework and it work only for Arabic language , for others language you must edit charCodeAt(0) comparison value.

$('#input_ar').keyup(function(){
    if ((($(this).val().charCodeAt(0) > 0x600) && ($(this).val().charCodeAt(0) < 0x6FF)) || ($(this).val()=="")) { $('#search_input').css("direction","rtl"); }
    else { $('#search_input').css("direction","ltr"); }
});