I have an input inside my form, it holds a value price of a product, at the beginning the input text placeholder is '$':
我在表单中有一个输入,它保存了产品的价格,输入文本占位符的开头是'$':
<input [placeholder]="$"/>
Now when ever I write something I want the '$' letter of the place holder to move with the cursor but inside the place holder and not as a text, for example when I write 123 it will show it like this 123$, what I did is at each change inside the input I add the letter '$' at the end of the input text but that it's not practical, I want it the letter '$' to be as a placeholder in the background and not part of the actual price.
现在,当我写东西时,我希望占位符的'$'字母随光标一起移动但在占位符内而不是作为文本,例如当我写123时它将显示它就像这个123 $,我是什么确实是在输入内部的每次更改时我在输入文本的末尾添加了字母'$',但这不实用,我希望字母'$'在后台作为占位符而不是实际的部分价钱。
Any help is appreciated.
任何帮助表示赞赏。
3 个解决方案
#1
1
Seems to me you'd create a filter (or a "pipe" in Angular 2 parlance). Your scope value can be modified in the view using a template without changing the original value.
在我看来,你会创建一个过滤器(或Angular 2用语中的“管道”)。您可以使用模板在视图中修改范围值,而无需更改原始值。
#2
1
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
占位符属性指定描述输入字段的预期值的简短提示(例如,样本值或预期格式的简短描述)。
The short hint is displayed in the input field before the user enters a value and disapear as soon as the user enters a value.
在用户输入值之前,输入字段中会显示短提示,并在用户输入值后立即消失。
What you want to do is to format the value that can't be achived with placehoder.
你想要做的是格式化使用placehoder无法实现的值。
I'll go with a directive allowing you to configure the currency to display and where to display it. Just like TestMask Lib
我将使用一个指令,允许您配置要显示的货币以及显示它的位置。就像TestMask Lib一样
#3
0
Since the "$" symbol is not meant to be part of the text and is used for guidance for the user, wouldn't you be better of implement this as something like:
由于“$”符号并不是文本的一部分,而是用于为用户提供指导,因此您最好将其实现为:
<label>$</label><input type="text" placeholder="Enter value in USD" />
This way the $ will remain constant in front of the entered value.
这样,$将在输入的值前保持不变。
#1
1
Seems to me you'd create a filter (or a "pipe" in Angular 2 parlance). Your scope value can be modified in the view using a template without changing the original value.
在我看来,你会创建一个过滤器(或Angular 2用语中的“管道”)。您可以使用模板在视图中修改范围值,而无需更改原始值。
#2
1
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
占位符属性指定描述输入字段的预期值的简短提示(例如,样本值或预期格式的简短描述)。
The short hint is displayed in the input field before the user enters a value and disapear as soon as the user enters a value.
在用户输入值之前,输入字段中会显示短提示,并在用户输入值后立即消失。
What you want to do is to format the value that can't be achived with placehoder.
你想要做的是格式化使用placehoder无法实现的值。
I'll go with a directive allowing you to configure the currency to display and where to display it. Just like TestMask Lib
我将使用一个指令,允许您配置要显示的货币以及显示它的位置。就像TestMask Lib一样
#3
0
Since the "$" symbol is not meant to be part of the text and is used for guidance for the user, wouldn't you be better of implement this as something like:
由于“$”符号并不是文本的一部分,而是用于为用户提供指导,因此您最好将其实现为:
<label>$</label><input type="text" placeholder="Enter value in USD" />
This way the $ will remain constant in front of the entered value.
这样,$将在输入的值前保持不变。