Question

例如，在Facebook上，如果您为键盘选择了阿拉伯语，则文本框会自动获得RTL方向。

如何在我的网络应用程序上实现此功能？我不知道使用的方法或属性。

Answer 1

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

input{
  direction: rtl;
}

<强>更新

要根据用户输入动态更改文本的方向，您可以检查输入的第一个字符，看它是否符合给定条件，在本例中为正则表达式。

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

});

这是一个基本示例，对于ascii文本使用ltr方向，对其他所有内容使用rtl。

Here's a working example.

Answer 2

在HTML5中，您可以这样做：

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

这会自动更改第一个字符的输入方向。希望它有所帮助。

注：

编辑：人们说它在IE11中不起作用。

Answer 3

最好根据文本的第一个字符检测文本方向。如果第一个属于RTL语言，那么方向必须改变。

例如，一个带有英文单词的波斯文本。

بهمعنایواقعی累هستم

另一个例子，英文段落可能包含波斯语单词，但整个文本必须在LTR中。

这个词用于不同的情况。 شیر的含义是......

此函数将检查输入的第一个字符。如果它属于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");
  }
});

有关详细信息，请访问此codepen。

Answer 4

如@bool3max所述，
免责声明：许多语言使用Unicode字符并被编写 LTR。您的函数为所有非ASCII字符设置了direction: rtl，这是不希望的。

我还发现了一个Pen，它在没有Regex的情况下完全相同。我对代码进行了一些调整，使其与多个输入字段和textareas兼容。它用于在之间使用它的目的；例如; 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;
  }

4 个答案: