如何使输入占位符随光标动态移动？答案

【问题标题】：How can I make an input placeholder dynamically move with cursor?如何使输入占位符随光标动态移动？
【发布时间】：2017-08-17 15:45:16
【问题描述】：

我的表单中有一个输入，它包含产品的价值价格，在开头输入文本占位符是'$'：

<input [placeholder]="$"/>

现在，当我写东西时，我希望占位符的“$”字母随光标移动，但在占位符内部而不是作为文本，例如当我写 123 时，它会像这样显示 123$ ，我所做的是在输入中的每次更改时，我在输入文本的末尾添加了字母“$”，但这不切实际，我希望将字母“$”作为背景中的占位符而不是部分实际价格。

感谢任何帮助。

【问题讨论】：

【解决方案1】：

placeholder 属性指定了一个简短的提示，用于描述输入字段的预期值（例如，示例值或预期格式的简短描述）。

短提示在用户输入值之前显示在输入字段中，并在用户输入值后消失。

您要做的是格式化占位符无法实现的值。

我将使用一个指令，允许您配置要显示的货币以及显示位置。就像TestMask Lib

【讨论】：

【解决方案2】：

既然“$”符号不是文本的一部分，而是用于为用户提供指导，那么您最好将其实现为：

<label>$</label><input type="text" placeholder="Enter value in USD" />

这样，$ 将在输入的值前面保持不变。

【讨论】：

【解决方案3】：

在我看来，您会创建一个过滤器（或 Angular 2 用语中的“管道”）。可以使用模板在视图中修改您的范围值，而无需更改原始值。

【讨论】：