我想在文本框中自动添加破折号（-）。如何在aurelia打字稿应用程序中执行此操作？

Question

[我正在尝试创建一个文本框，该文本框将允许使用XXX-XXX-XXXX格式的联系电话。但是我无法创建这个。如何在打字稿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

我会选择双向绑定文本框中的值，并使用value converter来更改值。这将使该函数更可重用，并且是价值转换器预期目的的一部分。

textbox.html

<require from="value-converters/phone"></require>
<input type="text" name.bind="name" class="form-control" placeholder.bind="placeholder" maxlength.bind="maxlength" 
  value.bind="val | phone"/>

textbox.ts

public val: string = '';

phone.ts

  // method must be named toView
  toView(value: string) {
      // I decided to go with RegEx here but you can add whatever you like.
      return value && value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
  }