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

Question

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

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

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

Answer 1

也许你可以在 TypeScript 文件中使用按键事件来实现这个技巧，并且只授权数字…… 在侦听器中，您可以防止默认事件，停止其传播，并且当它不是数字时 return false

Answer 2

在你的 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('')  : ''
 }
}

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

Answer 3

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

在您的 .ts 文件中：

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

在您的 .html 文件中：

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

Answer 4

试试这个：

我知道它不适用于输入类型="文本"。但它解决了 Number Only 问题。

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

参考这个link：https://github.com/ionic-team/ionic-framework/issues/7072#issuecomment-301675025

Answer 5

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

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

Allow only number in a ion-input with type=text Ionic

validation

input

ionic3

angular5