Css 带小数占位符的角度货币输入

我正在尝试做一个Angular（v2，但现在改名为Angular）组件，它可以简化金额的输入。为此，我想在单元键入之后显示“.00”占位符。然后，当用户键入“.”或“，”时，占位符将取消显示，让他键入小数

像这样： 1-首先是用户类型单位

2-然后用户键入“，”或“.”：

我已经在position absolute中添加了一个span，但它不会跟随键入的更改，让它检测用户输入和字体大小来确定它的位置有点繁琐

此外，我还尝试使用自定义管道，但希望返回以按需格式化样式的HTML已被清除并显示为文本

以下是我所做的基本工作：

<span>
        <custom-field-text
            [placeholder]="placeholderValue"
            [pattern]="pattern"
            [value]="value" 
            (change)="onChange($event)">
        </custom-field-text>
        <span [hidden]="!decimalPlaceholder" [ngClass]='setColor()'> {{0 | number:'1.2' | slice:1}} </span>
</span>

占位符仅在更改输入之前显示。若我像我做的那个样做一个到绝对位置的跨距，位置就必须根据字符串大小和字体大小来计算，我认为这太过分了

你知道我可以用什么技巧来达到这个目的吗？谢谢

HTML

 <input type="text" ng-keypress="($event.which >= 48)?changePlaceholder():0" placeholder="{{vm.modelP}}">

---

我设法使它工作，但我仍然有一个问题。当输入文本不是占位符时，我必须使其透明

在我的组件中，我做到了：

<span>
        <custom-field-text
            class="custom-field-currency-input"
            [placeholder]="'0,00'"
            [pattern]="pattern"
            [value]="value" 
            (change)="onChange($event)">
        </custom-field-text>
        <span class="decimal-placeholder"> 
            <span>{{value}}</span>
            <span [ngClass]='setColor()' *ngIf="placeholderVisibility">{{0 | number:'1.2' | slice:1}}</span>
        </span>
    </span>

此onChange函数（占位符可见性默认为false，因为当字段为空时HTML占位符处于活动状态）：

---

我工作：）我的“虚拟输入占位符”在打字的同时移动。有一个轻微的重叠，这就是为什么我想隐藏输入文本。

对不起，我会发布我的当前代码，这样你们就可以看到我做了什么。我已经检查了隐藏或显示自定义占位符的方法“ngModelChange”。它不适用于真正的占位符，因为它仅在字段为空时显示：(

vm.modelP="" ;         
changePlaceholder(){
    vm.modelP=",00";
    }

<span>
        <custom-field-text
            class="custom-field-currency-input"
            [placeholder]="'0,00'"
            [pattern]="pattern"
            [value]="value" 
            (change)="onChange($event)">
        </custom-field-text>
        <span class="decimal-placeholder"> 
            <span>{{value}}</span>
            <span [ngClass]='setColor()' *ngIf="placeholderVisibility">{{0 | number:'1.2' | slice:1}}</span>
        </span>
    </span>

span {
        display: table-cell;
        vertical-align: middle;

        span.decimal-placeholder {
            position: absolute;
            left: 0px;
            top: 40%;
            z-index: 1;

            span {
                display: table-cell;
            }

            span:last-child {
                padding-left: -10px;
                overflow: visible;
            }
        }
    }

  onChange(value: string): void {

      if(value.indexOf(',') >= 0 || value.indexOf('.') >= 0 || value === "") {
        this.placeholderVisibility = false;
      } else {
        this.placeholderVisibility = true;
      }
      this.placeholderValue = value;
      this.value = value;

  }