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

Question

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

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

2- 然后用户输入“,”或“.” ：

我已经为绝对位置添加了一个跨度，但它不会跟随输入的变化，并且让它检测用户输入和字体大小来确定它的位置有点乏味。

此外，我尝试使用自定义管道，但我想要返回的 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>

在我的 .ts 组件定义中，我编写了一个 onChange 方法：

onChange(value: string): void {

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

占位符仅在输入更改之前显示。如果我像我一样做一个定位绝对位置的跨度，位置将不得不根据字符串大小和字体大小来计算，我认为它矫枉过正......

你知道我可以用来实现这一目标的技巧吗？谢谢！

Answer 1

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

在我的组件中，我做了：

<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>

有了这个 SCSS 文件：

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 函数（placeholderVisibility 默认为 false，因为 HTML 占位符在字段为 void 时处于活动状态）：

  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;

  }

我在工作:) 我的“虚拟输入占位符”在我打字的同时移动。有轻微的叠加，这就是我想隐藏输入文本的原因。

Answer 2

HTML

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

角度

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