Javascript 如果用户可以使用rtl或ltr语言，如何自动更改输入字段的CSS方向属性

示例：如果我使用阿拉伯语，文本字段的方向将是rtl，如果我想编写新文本并切换到英语，文本字段内的方向（`text align:left）将自动为ltr

您可以在此处使用全局HTML5属性

dir

，值为

auto

，如下所示：

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

根据规范：

映射到自动状态的

auto

关键字表示 元素的内容是显式嵌入的文本，但 方向是使用 元素（如下所述）

注意：此状态使用的启发式非常粗糙（它只查看 第一个具有强烈方向性的角色，其方式类似于 双向算法中的段落级别确定）。 建议作者仅在以下情况下使用此值作为最后手段： 文本的方向确实是未知的，没有更好的服务器端 可以应用启发式算法

---

正如这句话所暗示的，最好在服务器端找出应该使用的方向，但如果你没有办法知道的话，你可以使用它。

你将遇到的第一个问题是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;
}

AAAA和所需的css为“方向”，值为“ltr”或“rtl”

css:

或

所有主要浏览器都支持。

谢谢您的帮助， 我使用javascript来解决这个问题，在这段代码中我使用了jquery框架，它只适用于阿拉伯语，对于其他语言，您必须编辑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"); }
});

$（'#input_ar'）.keyup（函数（）{
if（（$（this.val（）.charCodeAt（0）>0x600）和（$（this.val（）.charCodeAt（0）<0x6FF））| |（$（this.val（）==）{$（'搜索输入'）.css（“方向”，“rtl”）；）
else{$（'search_input'）.css（“direction”，“ltr”）；}
});

此链接对您非常有用：谢谢，亲爱的，但请告诉我如何在中更改方向

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

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

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; }