javascript 如何更改元素的文本方向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7770235/
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 the text direction of an element?
提问by user217648
On Facebook, for example, if you have chosen the Arabic language for your keyboard, the textbox automatically gets RTL direction.
例如，在 Facebook 上，如果您为键盘选择了阿拉伯语，则文本框会自动获得 RTL 方向。
How can I implement this on my web application? I don't know the method or property used.
如何在我的 Web 应用程序上实现它？我不知道使用的方法或属性。
回答by Jamie Dixon
You can use the CSS directionproperty to achieve this:
您可以使用 CSSdirection属性来实现此目的：
input{
direction: rtl;
}
Update
更新
To change the direction of the text dynamically based on the user input you can check the first character of input to see if it meets a given criteria, in this case a regular expression.
要根据用户输入动态更改文本的方向，您可以检查输入的第一个字符以查看它是否符合给定条件，在本例中为正则表达式。
$('input').keyup(function(){
$this = $(this);
if($this.val().length == 1)
{
var x = new RegExp("[\x00-\x80]+"); // is ascii
//alert(x.test($this.val()));
var isAscii = x.test($this.val());
if(isAscii)
{
$this.css("direction", "ltr");
}
else
{
$this.css("direction", "rtl");
}
}
});
This is a basic example that uses ltrdirection for ascii text and rtlfor everything else.
这是一个基本示例，它使用ltrascii 文本和rtl其他所有内容的方向。
回答by Reza Ameri
In HTML5 you can simply do this:
在 HTML5 中，您可以简单地执行以下操作：
<input type="text" dir="auto" />
this automatically change the direction of input base on first character. Hope it helps.
这会根据第一个字符自动更改输入方向。希望能帮助到你。
NOTE:
笔记：
Edited: People say that it does not work in IE11.
编辑：人们说它在 IE11 中不起作用。
回答by Hadi Farnoud
it's best to detect text direction based on first character of the text. if the first one belongs to RTL language, then direction has to change.
最好根据文本的第一个字符检测文本方向。如果第一个属于 RTL 语言，则方向必须改变。
example, a Persian text with English word in it.
例如，其中包含英语单词的波斯语文本。
?? ????? ????? tired ????
?? ????? ????? 疲劳的 ？？？？
another example, an English paragraph might contain a Persian word but the whole text has to be in LTR.
另一个例子，一个英文段落可能包含一个波斯语单词，但整个文本必须是 LTR。
this word is used in different situations. the meaning of ??? is...
这个词用在不同的场合。的含义 ？？？是...
this function will check the first character typed in. if it belongs to a RTL language, then direction will change. This code supports all RTL languages.
这个函数会检查输入的第一个字符。如果它属于 RTL 语言，那么方向会改变。此代码支持所有 RTL 语言。
function isRTL(str) {
var letters = [];
allRTL = new RegExp(
"^[\u0590-\u05fe\u0600-??-??-??-\u07be?-\u07fe\u0800-\u083e\u0840-\u085e\u08a0-\u08fe\u0900-?]|\ud802[\udf60-\udf7e]+$"
);
var cursor = 1;
for (var i = 0; i <= cursor; i++) {
letters[i] = str.substring(i - 1, i);
if(/\s/.test(letters[i])) {
cursor++;
}
if (allRTL.test(letters[i])) {
return true;
}
}
return false;
}
var dir = $("input[type=text]");
dir.keyup(function(e) {
if (isRTL(dir.val())) {
$(this).css("direction", "rtl");
} else {
$(this).css("direction", "ltr");
}
});
for more info visit this codepen.
有关更多信息，请访问此代码笔。
回答by Tes3awy
DISCLAIMERas stated by @bool3max: Many languages utilize Unicode characters and are written LTR. Your function sets
direction: rtlfor all non-ASCII characters, which isn't desired.
免责声明如说由@ bool3max：许多语言使用Unicode字符并写入LTR。您的函数设置
direction: rtl为所有非 ASCII 字符，这是不需要的。
I have found also a Penthat does exactly the same without Regex. I have tweaked the code a bit to be compatible with multiple input fields and textareas. It serves the purpose of using it between; for example; EN and AR languages.
我还发现了一个Pen，它在没有 Regex 的情况下完全相同。我稍微调整了代码以与多个输入字段和文本区域兼容。它的目的是在两者之间使用它；例如; EN和AR语言。
$('input[type="text"], textarea').each(function () {
$(this).on('input keyup keypress', function () {
if (isUnicode($(this).val())) {
$(this).css('direction', 'rtl');
} else {
$(this).css('direction', 'ltr');
}
});
});
function isUnicode(str) {
var letters = [];
for (var i = 0; i <= str.length; i++) {
letters[i] = str.substring((i - 1), i);
if (letters[i].charCodeAt() > 255) { return true; }
}
return false;
}
