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

Posted 2023-03-05

【中文标题】如何使输入占位符随光标动态移动？

【英文标题】：How can I make an input placeholder dynamically move with cursor?

【发布时间】：2017-08-17 15:45:16

【问题描述】：

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

<input [placeholder]="$"/>

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

感谢任何帮助。

【问题讨论】：

@isherwood 你所说的“非标准”是什么意思

你试过什么？ SO 要求您在提出问题之前表现出努力，而“任何帮助”通常过于宽泛。

@isherwood 因为在其他版本中我使用位于右侧的“€”

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

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

【讨论】：

查看评论部分，有时我需要将符号放在文本的右侧。

根据您使用什么来确定货币指标的位置，您可以轻松地将 “ng-if 或 ng-show”到 的前面或后面输入>

标签应包含对视力障碍者有用的文字（使用辅助技术）。他们应该指出输入的目的。装饰器是更好的方法。

【参考方案3】：

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

https://angular.io/docs/ts/latest/guide/pipes.html