文本框RTL与LTR和数字混合

Question

http://jsfiddle.net/53j53jtm/1/

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

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

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

Answer 1

当您处理多种输入格式时，最好的方法是完全分割输入。这不仅有助于确保您的RTL / LTR分离良好，而且还有助于实现用户体验

• 确保您的用户了解他们想要输入的内容
• 确保您输入的结果的显示格式正确（包含<span dir='rtl'>或<span dir='ltr'>）
• 使您的代码（无论分析表单输入）更容易识别以LTR为中心/以RTL为中心的文本和数字（这可以帮助您更好地进行排序和搜索等操作）
• 作为奖励，确保移动设备加载正确的键盘（数字键盘与全键盘）

最重要的是，看起来你的情况实际上是一个数字输入，后面有一个尾随单位。在这种情况下，您应该考虑将单位添加为静态跨度（如果它始终是相同的单位），或者甚至是一些下拉选项供用户选择。这意味着你要拆分实际数字和＆＃34;字符串＆＃34;输入以及用户期望插入的上下文，这通常是一个很好的用户体验决策。

如果所有后缀都相同，您可以执行以下操作：

<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="אום" />

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

Answer 2

我不支持此功能，因为CSS无法应用于标记的一部分。它是全标记或全无。

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