如何更改元素的文本方向？

Question

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

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

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

});

这是一个使用ltrascii文本方向和rtl其他所有内容的基本示例.

这是一个有效的例子.

Answer 2

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

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

这会自动改变第一个字符的输入方向.希望能帮助到你.

注意:

编辑:人们说它在IE11中不起作用.