从右到左文本HTML输入

Question

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

将css属性设置为

text-align:right

没有用,因为我无法将光标移到左边并在那里添加字母.所以我删除了该属性并添加了

direction:RTL

在这里,光标向左移动,文本右对齐.但是新添加的字符没有附加到左侧.相反,他们只被附加到右端.

我该如何解决？请帮忙..

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

Answer 1

这是我能想到的:

• 使用direction:RTL的右对齐
• 编写附加到事件的JavaScript处理程序:"onkeyup",执行将输入的字符移位到LEFT(进行一些文本处理).

Answer 2

您可以在输入中使用dir ="rtl".它受到支持.

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

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 和 LTR

Answer 7

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

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

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

有关该属性的更多信息，请参阅此处dir