文本框 RTL 与 LTR 和数字混合答案

【问题标题】：Textbox RTL mixed with LTR and numbers文本框 RTL 与 LTR 和数字混合
【发布时间】：2017-01-15 06:42:41
【问题描述】：

<input type=text dir=ltr value="אום SS 5.56">
<input type=text dir=rtl value="אום SS 5.56">

我试图让用户在同一个文本框中输入混合的 RTL 和 LTR 语言。如何在使用混合 LTR 降价编辑 RTL 文本时使文本框可读？

图片来自 Microsoft Word。它应该是什么样子：

【问题讨论】：

很不清楚你在问什么。除了输入框之外，您还拥有更多内容。这些并没有告诉任何人你必须使用什么。
你在说什么降价？你到底在追求什么？图片显示了代码示例中字符串的混合方向表示，整体从右到左的方向性覆盖了单词之间拉丁字母的自然方向性，但不在单词内部。如果你真的想要，用户必须输入适当的方向控制字符。

标签： html

【解决方案1】：

当您处理多种输入格式时，最好的方法是完全拆分输入。这不仅有助于确保您的 RTL/LTR 分离做得很好，而且有助于 UX 目的

最重要的是，您的案例似乎实际上是一个数字输入，其后设置了一个尾随单位。在这种情况下，您应该考虑将单位添加为静态跨度（如果它始终是相同的单位），或者甚至是一些下拉选项供您的用户选择。这将意味着您要拆分实际数字和“字符串”输入，以及用户期望插入的内容的上下文，这通常是一个很好的用户体验决策。

如果你所有的后缀都一样，你可以这样做：

<input type="number" dir="ltr" placeholder="Gauge" />
<span dir="ltr" lang="en">SS</span> <span dir="rtl" lang="he">אום</span>

如果您想允许自定义/用户输入的后缀，您可以有两个输入，将 ltr-string 用于数字+单位，另一个用于 RTL，如下所示：

<input type="text" dir="ltr" placeholder="5.56 ss" />
<input type="text" dir="rtl" placeholder="אום" />

我建议您考虑您的 UI 和 UX，并考虑您的实际用户生成内容应该是什么；例如，如果您有预设的后缀，这可能会更容易，或者如果您决定输入需要其他格式，重新排列用户添加数据的方式可能会更容易。无论哪种方式，做出这些决定都将帮助您显示正确的格式并让您的用户更轻松地插入您期望的数据。

【讨论】：

【解决方案2】：

不支持此功能，因为 CSS 无法应用于标签的一部分。要么全是标签，要么什么都没有。

您可以有一个 keyup 监听器，将值存储在内存中，解析内容并生成您自己的输出并使其看起来像单个输入。

【讨论】：