Как автоматически изменить CSS-свойство direction поля ввода, если пользователь может использовать язык rtl или ltr

Question

Пример: если я использую арабский язык, направление текстового поля будет rtl, и если я хочу написать новый текст и переключиться на английский язык, направление внутри текстового поля (`text-align: left) будет ltrавтоматически

Answer 1

Вы можете использовать глобальный атрибут HTML5 dir со значением auto здесь, например, так:

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

Из спецификации:

auto ключевое слово, которое отображается в автоматическое состояние. Указывает, что содержимое элемента является явно внедренным текстом, но направление должно определяться программно с использованием содержимого элемента (как описано ниже).

Примечание : эвристика, используемая этим состоянием, очень грубая (он просто смотрит на первый символ с сильной направленностью, способом, аналогичным определению уровня абзаца в двунаправленном алгоритме).Авторам настоятельно рекомендуется использовать это значение в качестве крайней меры, когда направление текста действительно неизвестно, и нельзя применить лучшую эвристику на стороне сервера.

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

Как следует из этой цитаты, было бы лучше узнать на стороне сервера, какое направление следует использовать, но вы можете использовать это, если у вас нет возможности узнать это.

Answer 2

спасибо за вашу помощь, я использовал javascript для решения этой проблемы, в этом коде я использовал jquery framework и он работает только для арабского языка, для других языков вы должны отредактировать значение сравнения charCodeAt (0).

$('#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"); }
});

Answer 3

aaaa, а css - это "направление" со значениями "ltr" или "rtl"

CSS:

textarea.rtl
{
  direction:rtl;
}

textarea.ltr
{
  direction:ltr;
}

или

document.getElementById("myTextArea").style.direction = "rtl"

поддерживается всеми основными браузерами.

Answer 4

body{direction: rtl;}
*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }

Answer 5

Первая проблема, с которой вы столкнетесь, заключается в том, что JavaScript не может напрямую определить языковые настройки пользователя, это значение отображается только в заголовке HTTP «Accept-Language», поэтому вам придется сделать что-то на стороне сервера, чтобы получить это значение и передать его в JavaScript. Например, в PHP:

$headers = apache_request_headers();
$ltr_languages = array("en-gb", "en-us", ...'); // a list of ltr languages to detect
if (in_array($headers["Accept-Language"], $ltr_languages)) {
    // some JavaScript or CSS to set the text ltr;
} else {
    // some JavaScript or CSS to set the text rtl;
}