javascript 如果用户可以使用语言 rtl 或 ltr，如何自动更改输入字段的 CSS 方向属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6777118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr
提问by Kheir Eddine
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
示例：如果我使用阿拉伯语，文本字段方向将是 rtl，如果我想写一个新文本并切换到英语，文本字段内的方向 (`text-align: left) 将自动为 ltr
回答by MMFTSBU
You could use the global HTML5 attribute dirwith a value of autohere, like so:
您可以使用dir值为autohere的全局 HTML5 属性，如下所示：
<input type="text" dir="auto" />
From the specification:
从规范：
The
autokeyword, 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.
的
auto关键字，该关键字映射到自动状态表示该元素的内容被明确地嵌入文本，但该方向是使用元素的内容以编程确定（如下所述）。注意：这种状态使用的启发式非常粗略（它只是看第一个方向性强的字符，类似于双向算法中的段落级别确定）。敦促作者仅在文本方向确实未知且无法应用更好的服务器端启发式时才将此值用作最后的手段。
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.
正如这句话所暗示的，最好在服务器端找出应该使用哪个方向，但如果您不知道它，您可以使用它。
回答by Kheir Eddine
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.
感谢您的帮助，我使用 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"); }
});
回答by Joseph Marikle
aaaaand the css needed is "direction" with the values of "ltr" or "rtl"
aaaaand 所需的 css 是“direction”，值为“ltr”或“rtl”
css:
css：
textarea.rtl
{
direction:rtl;
}
textarea.ltr
{
direction:ltr;
}
or
或者
document.getElementById("myTextArea").style.direction = "rtl"
supported by all major browsers.
所有主流浏览器都支持。
回答by nwellcome
The first problem you are going to run into is that JavaScript cannot directly detect a user's language setting, that value only shows up in the HTTP 'Accept-Language' header, so you will have to do something server-side to get this value and pass it to the JavaScript. For example, in PHP:
您将遇到的第一个问题是 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;
}
回答by kamatchikumar-India
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; }
