Question

我正在研究ionic2应用程序。在这里，我需要以用户输入两位数字的方式显示输入字段，然后必须将空格添加到数字意味着每对数字必须添加一个空格。我曾尝试使用jQuery实现它。但是在ionic2 $(this).val()中没有用。有没有办法实现这种模式？

以下是我的代码。

＆＃13;

toothFn(value) {
  console.log("tooth");
  console.log("toothvalue",value); 
  var foo = value.split(" ").join("");
  if (foo.length > 0) {
    console.log("if");
    foo = foo.match(new RegExp('.{1,2}', 'g')).join(" ");
  }
  console.log("foo", foo);
  return foo;
}

＆＃13;

 <ion-list>
 <ion-item>
   <ion-label floating>Tooth Number</ion-label>
   <ion-input type="number" (input)="input = toothFn(input)" oninput="this.value = Math.abs(this.value)" formControlName="toothNum" id="toothNum">
   </ion-input>
 </ion-item>
 <ion-item *ngIf="caseform.controls.toothNum.hasError('required') && caseform.controls.toothNum.touched">
   <p style="color:red">please enter the tooth number!</p>
 </ion-item>
</ion-list>

＆＃13;

Answer 1

不确定确切的模式，但您可以检查输入中的每个keyup事件。

例如。

  <ion-input [(ngModel)]="textNumber" (keypress)="validate($event)" (keyup)="addSpace()"></ion-input>

  addSpace(){

    //first remove previous spaces
    this.textNumber = this.textNumber.replace(/\s/g, '');

    //then add space (or any char) after second (or any "n-th") position
    this.textNumber = this.chunk(this.textNumber, 2).join(' ');
  }

  //validate and only allow numbers
  validate(event){
      return event.charCode >= 48 && event.charCode <= 57;
  }

  chunk(str: any, position: number){
    let ret = [];
    let i;
    let len;

    for(i = 0, len = str.length; i < len; i += position) {
       ret.push(str.substr(i, position));
    }

    return ret;
  }

以下是一个简单示例：https://stackblitz.com/edit/input-check

聚苯乙烯。 type="number"定义数字输入字段和浮点数，这意味着它不仅限于数字，例如，您可以添加字符 e 因为e是数学常数。

如何在angular2中的离子输入字段中的两位数之后插入空格？

1 个答案: