15

在 Google plus（以及许多其他地方）中，当我想发布一些东西时，当我用波斯语（一种从右到左的语言）输入时，文本方向会自动设置为rtl和text-alignment:right，而当我开始输入英文它会自动更改为ltr和text-alignment:left. 我怎样才能拥有这样的功能？这与 HTML5 或 Javascript 有什么关系吗？我应该遵循什么线索？

提前致谢

4

6 回答 6

16

添加dir=auto到您的输入元素：

在表单和插入的文本上使用 dir="auto" 以自动检测在运行时提供的内容的方向。

https://www.w3.org/International/questions/qa-html-dir#quickanswer

于 2019-05-16T13:50:44.797 回答
8

我写了一个 JQuery 代码来做到这一点。只需将类“checkRTL”添加到要设置其方向的元素。

var rtlChar = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
$(document).ready(function(){
    $('.checkRTL').keyup(function(){
        var isRTL = this.value.match(rtlChar);
        if(isRTL !== null) {
            this.style.direction = 'rtl';
         }
         else {
            this.style.direction = 'ltr';
         }
    });
});
于 2016-11-22T14:01:47.757 回答
4

还有 Twitter 的库，这可能会有所帮助：

https://github.com/twitter/RTLtextarea

于 2013-03-16T18:16:23.370 回答
4

添加dir="auto"到您的元素，然后使用window.getComputedStyle(element).getPropertyValue('direction')

例子：

<div id="foo" dir="auto">نے والے ہیں۔<div>

// returns rtl
window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')
于 2020-08-17T01:39:15.693 回答
2
  1. 从右到左列出语言的典型字符
  2. 即时检测它们（通常的 js 事件）
  3. 相应地更改 CSS 类

或点击此链接：

http://www.i18nguy.com/temp/rtl.html

于 2013-03-15T21:02:23.107 回答
1

我遇到了dir=auto有时不工作的问题在挖掘 CSS 之后我发现

#container > * {
    text-align: start;
    unicode-bidi: plaintext;
}

更灵活通用

于 2021-12-18T12:59:54.247 回答