在 type=text Ionic 的离子输入中只允许数字

Posted 2023-02-18

【中文标题】在 type=text Ionic 的离子输入中只允许数字

【英文标题】：Allow only number in a ion-input with type=text Ionic

【发布时间】：2019-06-09 10:31:54

【问题描述】：

我需要进行以下输入，以便它只接受数字：

<ion-input formControlName="quantity"></ion-input>

我知道这可以通过 type=number 来实现，但出于其他原因我仅限于使用类型文本。是否可以使用类型文本来做到这一点？还有如何验证最小和最大金额？

【问题讨论】：

如果我理解正确，您愿意使用 Angular/任何其他基于 JS 的限制来限制用户输入吗？？

正确，在这种情况下是离子。

【参考方案1】：

在您的 html 文件中

<ion-input (ionInput)="numeric($event)" formControlName="quantity"></ion-input>

在您的 ts 文件中

numeric(event)
   let patter = /^([0-9])$/;
   let val = pattern.test(event.key);
   return val;

【参考方案2】：

试试这个：

---

我知道它不适用于输入 type="text"。但它解决了仅数字问题。

<ion-item>
   <ion-label>Number</ion-label>
   <ion-input type="tel" maxlength="10"></ion-input>
</ion-item>

参考此链接：https://github.com/ionic-team/ionic-framework/issues/7072#issuecomment-301675025

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案3】：

可以通过以下方式精确完成：

在您的 .ts 文件中：

numericOnly(event): boolean 
   let patter = /^([0-9])$/;
   let result = pattern.test(event.key);
   return result;

在您的 .html 文件中：

<ion-input
        class="input"
        inputmode="numeric"
        type="number"
        (keypress)="numericOnly($event)"
      >
</ion-input>

【参考方案4】：

在你的component.html:

`<ion-input (ionInput)="onInput($event)" maxlength="3" ></ion-input>`

然后在您的component.ts 文件中：

onInput($event:any) 
 let theEvent = $event || window.event,
     key = theEvent.target.value,
     regex = /[0-9]+/g
 if( !regex.test(key) ) 
   let resp = $event.target.value.match(regex)
   $event.target.value = resp ? resp.join('')  : ''
 

当检测到输入时，只需从值中删除任何不是数字的内容。

【参考方案5】：

也许你可以用 TypeScript 文件中的按键事件来解决这个问题，并且只授权数字…… 在监听器中，您可以阻止默认事件，停止它的传播并在它不是数字时返回 false