Question

我需要输入以下内容，使其仅接受数字：

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

我知道可以使用type = number来实现，但是出于其他原因，我只能使用类型文本。使用文字类型是否可以这样做？还有如何验证最小和最大金额？

Answer 1

也许您可以使用TypeScript文件中的keypress事件来完成技巧，并且仅授权数字… 在侦听器中，您可以防止Default事件，停止传播并在非数字时返回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 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>

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

3 个答案: