我想在文本框中自动添加破折号 (-)。我如何在 aurelia typescript 应用程序中执行此操作？

Question

我在这里尝试创建一个允许 XXX-XXX-XXXX 格式的联系电话的文本框。但是我无法创建它。如何在 typescript aurelia 中创建格式化的联系电话？

textbox.html

<input type="text" name.bind="name" class="form-control" placeholder.bind="placeholder" maxlength.bind="maxlength" onblur="addHyphen(f)"/>

textbox.ts

addHyphen(f){
    f.value = f.value.slice(0,3)+"-"+f.value.slice(3,6)+"-"+f.value.slice(6,10);
   }

Answer 1

我对此进行了更新，使其与您在评论中提供的 JsFiddle 类似/

textbox.html

<template>
  <input type="text" name.bind="name" class="form-control" 
    placeholder.bind="placeholder" maxlength.bind="maxlength
    keydown.delegate="keydown($event)" ref="text"/>
</template>

textbox.ts

export class Textbox {
  public text: HTMLInputElement;

  public keydown(e) {
      const key = e.key || e.keyCode || 0;
      if (key !== 8 && key !== 9) {
          if (this.text.value.length === 3) {
              this.text.value += '-';
              console.log(e);
          }
          if (this.text.value.length === 7) {
              this.text.value += '-';
              console.log(e);
          }
      }
    return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
  }
}

我想在文本框中自动添加破折号 (-)。我如何在 aurelia typescript 应用程序中执行此操作？

I want to automatically add dashes (-) in a textbox. How can I do this in an aurelia typescript application?

validation

typescript

aurelia

textbox.html

textbox.ts

textbox.html

textbox.ts