减号登录RTL文本框

Question

如何在从右到左的文本框中显示负数，并在数字的左侧显示减号？

现状：1-
期望状态：-1

Answer 1

在文本框中，您只需要重置direction，并将文本右对齐：

BODY {
  direction: rtl;
}

#test {
  direction: ltr;
  text-align: right
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit.<br />

  <input type="text" id="test" value="-109309" />
</div>

Answer 2

当涉及UI中的上下文时，这是RTL / LTR的一般问题。

简短回答：最好的方法是将数字输入和字符串输入专用于单独的文本框。大多数RTL语言的数字（不是全部，要小心！）是LTR，字符串是RTL，分割上下文允许您正确定义输入。

示例 -

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

请注意，W3C建议在html标记中设置语言而不是CSS，这对于辅助功能和屏幕阅读器来说也更好。添加一个lang =＆＃34;＆＃34;如果可能，也建议使用属性。

在可能的情况下，分别为字符串和数字拆分文本框有几个很好的理由，特别是对于RTL / LTR：

• 这通常是一个很好的用户体验决策，因为它可以让用户清楚地知道他们想要输入什么内容。
• 您的代码（或任何分析表单字段）明确区分什么是字符串，什么是数字输入，无论是什么计算或显示问题。
• 当您显示结果时，您可以确保正确显示数字和文字（相关时使用<span dir="ltr">...</span>或dir="rtl"）
• 将输入定义为数字允许移动设备加载数字键盘而不是全键盘，这对UX来说是一个奖励。

我知道这个问题已有几年的历史了，但我希望这可以帮助那些有兴趣支持RTL或其表单中的混合方向的新考虑因素（以及此后的一些技术更新，特别是移动版）。