web-dev-qa-db-ja.com

右から左へのテキストHTML入力

私のウェブサイトでは、アラビア語のサポートを提供する必要があります。その一部は、ユーザーが入力するときに、新しい文字を左に追加し、テキストを右揃えにする入力テキストボックスを提供することです。

cssプロパティを設定する

text-align:right

カーソルが左に来てそこに文字を追加することができなかったので、うまくいきませんでした。だから私はそのプロパティを削除して追加しました

direction:RTL

ここで、カーソルは左に来て、テキストは右揃えになりました。しかし、新しく追加された文字は左側に追加されませんでした。代わりに、右端にのみ追加されていました。

どうすれば修正できますか？助けてください..

たとえば、Googleアラビア語ページの検索ボックスをご覧ください。派手なキーボードアイコンなどではなく、正確な動作が必要です http://www.google.com/webhp?hl=ar

cssinputarabicright-to-left
29
Anand

ここに私が考えることができるものがあります：

  • 使用する direction:RTL右揃えの場合
  • イベントに添付されたJavaScriptハンドラー「onkeyup」を作成します。これは、入力された文字を左にシフトします（テキスト処理を行います）。
28
Saket

入力でdir = "rtl"を使用できます。サポートされています。

<input dir="rtl" id="foo"/>
27
Nicholas Mayne
function rtl(element)
{   
    if(element.setSelectionRange){
        element.setSelectionRange(0,0);
    }
}




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

このコードでできます。

8
Anshul

direction:RTLのみを使用し、システム設定で適切なキーボード（アラビア語など）に切り替えると、新しく追加された文字が正しく左側に追加されます。

4
Martin Grůber

Cssの入力で使用します。

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

Chromeブラウザで動作します。
div要素を使用して編集可能にします。

    <div contenteditable="true">
    </div>
0
Vishesh Kumar

Angular Materialに加えて、方向：rtlに固有の機能は次のとおりです。

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

これはRLTとLTRの両方で機能します

0
Qamar Al Zaman Habeek