首页 文章

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

提问于
浏览 次
2

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

像这样：1-用户首先输入单位

1- The user type units at first

2-然后用户输入'，'或' . ' ：

2- The user then type ',' or '.

我已经添加了一个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>

在我的.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;
  }

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

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

css angular

2 回答

  • 0

    HTML

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

    ANGULAR

    vm.modelP="" ;         
changePlaceholder(){
    vm.modelP=",00";
    }
    回复于
  • 0

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

    在我的组件中，我做了：

    <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，因为当字段为void时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;

  }

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

    回复于

相关问题