css 如何更改元素的文本方向?

wyyhbhjk  于 2022-12-15  发布在  其他
关注(0)|答案(5)|浏览(425)

例如,在Facebook上,如果你为键盘选择了阿拉伯语,文本框会自动获得RTL方向。
我如何在我的Web应用程序上实现它?我不知道使用的方法或属性。

2hh7jdfx

2hh7jdfx1#

您可以使用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");
        }
    }

});

这是一个基本的例子,使用ltr方向为ascii文本和rtl为其他一切。
Here's a working example.

w51jfk4q

w51jfk4q2#

在HTML5中,您可以简单地执行以下操作:

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

这会根据第一个字符自动改变输入方向。希望有帮助。
注:
编辑:人们说它在IE11中不起作用。

ujv3wf0j

ujv3wf0j3#

最好根据文本的第一个字符来检测文本方向。如果第一个字符属于RTL语言,则方向必须改变。
例如,波斯语文本中有英语单词。
工作
另一个例子,英语段落可能包含一个波斯语单词,但整个文本必须是LTR。
这个词在不同的场合下使用。
这个函数将检查输入的第一个字符。2如果它属于RTL语言,那么方向将改变。3这个代码支持所有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

0yycz8jy

0yycz8jy4#

对于输入元素,可以使用Unicode内在方向

input {
    text-align: start;
    unicode-bidi: plaintext;
}

当然,它可以与其他元素一起工作,比如div,contenteditable如注解中提到的那样为真。

bweufnob

bweufnob5#

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

我也发现了一个Pen,它在没有正则表达式的情况下也能做同样的事情。我稍微调整了一下代码,使其兼容多个输入字段和文本区域。它的目的是在以下两个区域之间使用它:例如,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;
  }

相关问题