减号登录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 =""属性.

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

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

我知道这个问题已有几年了,但我希望这可以帮助那些有兴趣支持RTL或其表单中的混合方向的新考虑因素(以及从那时起的一些技术更新,特别是移动版).