十进制后一位输入类型仅数字 我正在使用的 Ionic 3 最新版本 (3.9.2)

Question

我正在使用离子最新版本3.9.2.我面临一个问题。我有一个输入框。输入类型数字，当用户在文本框中输入时，它们只允许小数点后的一个数字。在输入框中最多只有一个小数点允许不超过一个。

Examples: 
1) 1407.1
2) 6449496.8
3) 1.1

像这样，只有用户才能在小数点后输入一个数字

我的网页代码

<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

您可以使用文本掩码模块。请尝试一下，让我知道。

文档中的演示页面

npm i 角度2-文本掩码 --保存

然后，将其导入到您的@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(。但是，这是一种快速而简单的方法。

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

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