自动更改文本框的文本方向

When you go to Facebook and want to leave a comment, regarding which language you have chosen for your keyboard the direction of the textbox changes automatically when you click on it to write your comment. If you have chosen Arabic language for your keyboard the textbox automatically gets RTL direction. any idea how it has been implemented? I would like to use it on my web application.

当您访问Facebook并希望发表评论时，关于您为键盘选择的语言，当您单击文本框以撰写评论时，文本框的方向会自动更改。如果您为键盘选择了阿拉伯语，则文本框会自动获得RTL方向。知道它是如何实现的吗？我想在我的网络应用程序中使用它。

3 个解决方案

#1

You can use the CSS direction property to achieve this:

您可以使用CSS direction属性来实现此目的：

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 ltr direction for ascii text and rtl for everything else.

这是一个基本的例子，它为ascii文本使用ltr方向，对其他所有文件使用rtl。

Here's a working example.

这是一个有效的例子。

#2

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中不起作用。

#3

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.

有关更多信息，请访问此codepen。

#1