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

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

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

text-align:right

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

direction:RTL

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

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

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


input right-to-left css arabic
person Anand    schedule 23.09.2011    source источник
comment
Обычно ‹bdo dir = rtl› TEXT HERE ‹/bdo› делает именно это, но при получении текста из формы или чего-то подобного это не сработает.   -  person Gust van de Wal    schedule 21.11.2014
comment
Не могли бы вы опубликовать свое решение?   -  person    schedule 26.09.2016

Ответы (8)


arrow_upward
37
arrow_downward

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

  • Используйте direction:RTL для правого выравнивания.
  • Напишите обработчик JavaScript, прикрепленный к событию: «onkeyup», который выполняет сдвиг введенного символа в ЛЕВЫЙ (выполняя некоторую обработку текста).
person Saket    schedule 23.09.2011
comment
Ахмед, не могли бы вы рассказать, как вам удалось это решить? - person ; 26.09.2016
comment
Скрипка была бы хороша. Спасибо - person Super Coder; 01.02.2017
comment
JS ни в коем случае не нужен, извините, но это действительно плохое предложение. Николай, ответьте ниже, dir="rtl" - это все, что нужно: w3.org/International/questions / qa-html-dir - person KayakinKoder; 21.05.2018

arrow_upward
45
arrow_downward

Вы можете использовать dir = "rtl" на входе. Поддерживается.

<input dir="rtl" id="foo"/>
person Nicholas Mayne    schedule 08.08.2014
comment
Также обратите внимание, что с 2018 года для некоторых браузеров по-прежнему рекомендуются прокладки CSS, см. w3.org/International/articles/inline-bidi-markup - person KayakinKoder; 21.05.2018

arrow_upward
8
arrow_downward 

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




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

Этот код подойдет.

person Anshul    schedule 29.09.2011

arrow_upward
7
arrow_downward

Просто используйте этот CSS, это изменит ваше текстовое поле и положение курсора справа налево.

input, textarea { 
 unicode-bidi:bidi-override; 
 direction: RTL; 
}
person Deep Bisht    schedule 13.05.2020

arrow_upward
5
arrow_downward

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

person Martin Grůber    schedule 25.07.2014

arrow_upward
3
arrow_downward

Используйте на входе в css.

input {
  unicode-bidi:bidi-override;
  direction: RTL;
}
person haibnu    schedule 21.12.2016

arrow_upward
3
arrow_downward

Особенностью Angular Material, помимо direction: rtl, является:

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

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

person Qamar Al Zaman Habeek    schedule 05.07.2018

arrow_upward
-1
arrow_downward

Он работает в браузере Chrome.
Используйте элемент div и сделайте его редактируемым.

    <div contenteditable="true">
    </div>
person Vishesh    schedule 11.08.2019