Question

我正在使用离子最新版本3.9.2。而且我遇到了一个问题。我有一个输入框。输入类型编号，当用户在文本框中输入时，它们只允许小数点后的一位数。在输入框中，最多只有一位小数不能超过一个。

Examples: 
1) 1407.1
2) 6449496.8
3) 1.1

像这样，只有用户可以输入十进制后的一位数

我的Html代码

 <ion-item>
    <ion-label fixed>TECHLOG:</ion-label>
    <ion-input type="number" [ngModel]="mymodel" (ngModelChange)="onChangeTech($event)"></ion-input>
 </ion-item>

我的ts文件代码

  onChangeTech(event) {
    alert(event)
  }

在警报中，我得到了我输入的数字，但是我不知道如何在输入框中的一个小数后强行停止。

Answer 1

您可以使用text-mask模块。请尝试并告诉我。

Demo Page from the Doc

npm i angular2-text-mask --save

然后，将其导入@NgModule：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
  imports: [
    FormsModule,
    TextMaskModule
  ],
  declarations: []
})
export class MyModule {}

Answer 2

这种方式不正确100％。它将围绕用户输入（例如1.57 - > 1.6）。它无法处理错误的输入（例如1.2.3454）。但是，这是一种快速而简单的方法。

＆＃13;

let input = document.getElementById('numberInput');
input.addEventListener('keyup', (event) => {
  let value = parseFloat(input.value);
  if (value) {
    input.value = parseFloat(value.toFixed(1));
  }
})

＆＃13;

<input type="number" id="numberInput" step="0.1" />

＆＃13;

十进制一个地方输入类型唯一数字离子3最新版本（3.9.2）我正在使用

2 个答案: