RTLテキストボックスのマイナス記号

Question

数値の左側にマイナス記号を付けて、右から左のテキストボックスに負の数を表示するにはどうすればよいですか？

現在の状態：1 -
望ましい状態：-1

Answer 1

あなたのテキストボックスにあなただけのdirectionをリセットし、右にテキストを整列する必要があります。

BODY { 
    direction: rtl; 
} 
#myInput { 
    direction: ltr; 
    text-align: right; 
} 

Example fiddle here

Answer 2

これは、UIのコンテキストに関するRTL/LTRの一般的な問題です。

短い答え：数値入力と文字列入力をテキストボックスに分けることをお勧めします。ほとんどのRTL言語（すべてではないが注意！）の数はLTRであり、文字列はRTLであり、コンテキストを分割することで入力を適切に定義することができます。

例 -

Place: <input type="text" dir="rtl" /> 
Temperature: <input type="number" dir="ltr" /> 

注W3Cはまた、アクセシビリティとスクリーンリーダーのための優れているHTMLマークアップ言語ではなく、CSSを設定することをお勧めします。可能であれば、lang = ""属性を追加することもお勧めします。

可能文字列や数値のためのテキストボックスを分割するには、いくつかの理由が特にRTL/LTRのために、個別にあります

• これは良いUXの決定は通常、それはあなたのユーザーにそれが明確になるためどのような彼らタイプすると予想されます。
• 計算や表示の問題が何であっても、文字列と数値入力が何であるかについて、コード（またはフォームフィールドを分析するもの）が明確に区別されます。あなたは結果を表示するとき、あなたは番号とテキストが（<span dir="ltr">...</span>またはdir="rtl"関連を使用して）正しく表示されていることを確認することができます
• 数値は、モバイルデバイスは、数字パッドではなく、フルキーボードをロードすることを可能にするように、入力の定義、これはUXのボーナスです。

この質問は数年前ですが、RTLや複数の方向をフォームにサポートすることに関心がある人にとって、これは新しい考慮事項（およびそれ以降モバイル技術を含むいくつかのテクノロジアップデート）に役立つことを願っています。