Question

我试图做一个Angular（v2，但现在改名为Angular）组件，它可以简化金额的输入。要做到这一点，我想显示＆＃34; .00＆＃34;在单元输入之后的占位符。然后，当用户键入＆＃34;。＆＃34;或＆＃34;，＆＃34;，占位符消失，让他输入小数。

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

2-用户然后键入＆＃39;，＆＃39;或＆＃39;。＆＃39; ：

我已经添加了一个位置绝对位置，但它不会跟随输入更改，并使其检测用户输入和字体大小以确定它的位置有点单调乏味。

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

仅在输入更改之前显示占位符。如果我按照我的方式设置绝对位置，则必须根据字符串大小和字体大小来计算位置，我认为它已经过度了...

你知道一个技巧或者我可以用来实现这个目的的东西吗？ thx！

Answer 1

HTML

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

角

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

Answer 2

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

在我的组件中，我做了：

<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占位符处于活动状态）：

  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;

  }

我工作:)我的＆＃34;虚拟输入占位符＆＃34;和我的打字同时移动。有一个轻微的叠加，这就是我想隐藏输入文本的原因。

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

2 个答案: