Справа налево ввод текста HTML

Question

Для моего сайта мне нужна арабская поддержка. Частью этого является предоставление текстовых полей ввода, где при вводе пользователем новые символы должны быть добавлены слева, а текст должен быть выровнен по правому краю.

установка свойства css на

text-align:right

не сработало, так как я не мог заставить курсор подойти налево и добавить туда буквы. Поэтому я удалил это свойство и добавил

direction:RTL

Здесь курсор оказался слева, а текст выровнен по правому краю. но добавленные символы не добавляются слева. Вместо этого они добавлялись только к правому концу.

Как мне это исправить? пожалуйста, помогите ..

Например, см. Окно поиска на арабской странице Google. Мне нужно точное поведение, хотя не с этими причудливыми значками клавиатуры и т. Д., http://www.google.com/webhp?hl=ar

Answer 1

Вот что я могу придумать:

• Используйте direction:RTL для ПРАВИЛЬНОГО выравнивания
• Написать обработчик JavaScript, присоединенный к событию: «onkeyup», который выполняет смещение введенного символа влево (выполняет некоторую обработку текста).

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

Используйте только direction:RTL, и при переключении на правильную клавиатуру (например, на арабский) в системных настройках вновь добавленные символы будут правильно добавляться слева.

Answer 5

Особенность, специфичная для углового материала, в дополнение к направлению: rtl:

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

Это будет работать как для RLT, так и для LTR

Answer 6

Использовать на входе в CSS.

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