从右到左文本 HTML 输入

Question

对于我的网站，我需要提供阿拉伯语支持。其中一部分是提供输入文本框，当用户输入时，新字符必须附加到左侧，并且文本必须右对齐。

将 css 属性设置为

text-align:right

不起作用，因为我无法让光标移至左侧并在那里添加字母。所以我删除了该属性并添加了

direction:RTL

此处，光标移至左侧且文本右对齐。但新添加的字符没有附加到左侧。相反，它们仅被附加到右端。

我该如何解决这个问题？请帮忙..

例如，请参阅谷歌阿拉伯语页面搜索框。我需要确切的行为，尽管不是那些花哨的键盘图标等，http://www.google .com/webhp?hl=ar

Answer 1

您可以在输入上使用 dir="rtl"。是支持的。

<input dir="rtl" id="foo"/>

Answer 2

这是我能想到的：

• 使用 direction:RTL 进行右对齐
• 编写一个附加到事件的 JavaScript 处理程序：“onkeyup”，它将输入的字符向左移动（执行一些文本操作）加工）。

Answer 3

function rtl(element)
{   
    if(element.setSelectionRange){
        element.setSelectionRange(0,0);
    }
}




<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>

这段代码就可以了。

Answer 4

只需使用此 CSS，即可将文本字段和光标位置从右更改为左。

input, textarea { 
 unicode-bidi:bidi-override; 
 direction: RTL; 
}

Answer 5

仅使用direction:RTL，当在系统设置中切换到正确的键盘（例如阿拉伯语）时，新添加的字符将正确附加到左侧。

Answer 6

除了方向：rtl 之外，Angular Material 特有的一个功能是：

.mat-form-field {
   text-align: start!important;
 }

这适用于 RLT 和 RLT。长期TR

Answer 7

更好、更用户友好的方法是将 dir 属性设置为 auto。

<input dir="auto" id="foo"/>

这样，如果用户输入英文文本，它将自动左对齐，如果他输入阿拉伯文本，它将自动右对齐

请参阅 此处了解有关 dir 属性的更多信息

Answer 8

用于 css 中的输入。

input {
  unicode-bidi:bidi-override;
  direction: RTL;
}

Answer 9

它适用于 Chrome 浏览器。
使用 div 元素并使其可编辑。

    <div contenteditable="true">
    </div>