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

Posted 2023-03-13

【中文标题】十进制一位输入类型仅数字 Ionic 3 最新版本 (3.9.2) 我正在使用

【英文标题】：Decimal one place input type only number Ionic 3 latest version (3.9.2) I'm using

【发布时间】：2018-01-28 04:41:20

【问题描述】：

我正在使用 ionic 最新版本 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)
  

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

【问题讨论】：

你能显示code吗？

请检查我的代码，我们只能在 HTML 端解决这个问题吗？谢谢

您能否也显示mymodel 的详细信息？ code 在.ts 文件上？

如果没有 [ngModel]="mymodel"，我没有在我的 .ts 中的任何地方使用 mymodel 我的更改函数没有被调用，这就是我放那个的原因。我是 ionic 新手。

您是否需要限制用户在文本输入中输入only 1 小数位？例如10.2?

【参考方案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 

【讨论】：

好的，我现在就试试这个，我会告诉你的。

我无法理解您的示例：我们必须将这一行放入模板中：` `

只需将input 替换为ion-input。

你有任何其他简单的例子，当我当时使用输入时，我的应用程序会抛出错误。

好的，我会创建一个示例并通知您。

【参考方案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" />

【讨论】：

它正在使用 ionic 3？并感谢您与我分享您的示例，我会让您知道它是否有效。

这只是javascript。 Ionic 是一个 javascript 框架。

嗨，Duannx，我已经尝试过了，但这个逻辑并没有强制阻止我十进制一位输入类型。当用户输入一位小数时，用户无法输入一位小数后的数字。

哦。我以为这就是你想要的。用户只能输入一个只有一位小数的数字。