Input 向离子输入中添加美元符号

我目前有：

<ion-item>
    <ion-label sale floating>Sale Price< /ion-label>
    <ion-input type="number" clearInput placeholder="$">< /ion-input>
</ion-item>

一时兴起，希望能奏效。事实并非如此

有人曾经经历过这种情况并有解决方案吗

---

谢谢你提出了一个有趣的问题。下面的方法应该有效，因为在实践中，我相信

会被转换为DOM中的标准HTML5输入

input[type=number]:before {
    content: "$";
}

---

这是一个很好的问题，@Lightbeard的答案对于大多数用例来说应该足够了。我想分享一个替代解决方案，使用

在模板中，如果使用表单控件，则可以这样实现：

<ion-item>
  <ion-label sale floating>Sale Price< /ion-label>
  <ion-input type="number" formControlName="salePrice" value="{{ formControl.get('salePrice').value | roundDollars }}">< /ion-input>
</ion-item>

销售价格

这样做的缺点是，它会将“$”预先挂起到表单中提交的实际值。我将数据存储为一个数字而不是字符串，因此我将“$”字符放在表单下方禁用的输入上，以显示多个输入的总和

这意味着用户正在键入的实际输入不显示“$”，但在表单中显示得更低

我的生产模板如下所示：

<ion-item>
  <ion-label floating>Monthly Total:</ion-label>
  <ion-input [disabled]="true" class="invisible" type="number" formControlName="monthlyFee"></ion-input>
</ion-item>
<p class="offset-y-32">{{ detailsForm.get('monthlyFee').value | roundDollars }}</p>

每月总数：
{{detailsForm.get（'monthlyFee'）.value}

My

.invisible

类仅设置

不透明度：0

，因此您仍然可以使用

离子项中的行，而
.offset-y-32
将
文本上移32像素

这是一个
你的回答帮助我解决了一个类似的问题。然而，它不应该是
：：before
？这对我有帮助，但对我来说是：
离子输入[type=number]：：before{content:“$”；}
现在我只是想把它隐藏起来，而输入不在focus中。仅供参考，我通过
离子输入[type=number]：focus in：：before{content:“$”；}得到了我想要的东西
这仅在输入处于焦点时显示美元符号。非常适合使用浮动标签。这正是我想要的。下划线来自哪里？您导入的是什么库文件？洛达斯？
<ion-item>
  <ion-label sale floating>Sale Price< /ion-label>
  <ion-input type="number" formControlName="salePrice" value="{{ formControl.get('salePrice').value | roundDollars }}">< /ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Monthly Total:</ion-label>
  <ion-input [disabled]="true" class="invisible" type="number" formControlName="monthlyFee"></ion-input>
</ion-item>
<p class="offset-y-32">{{ detailsForm.get('monthlyFee').value | roundDollars }}</p>