Is there a way to automatically insert dashes (-) into a textbox within an aurelia typescript application?

Question

Is there a way to automatically insert dashes (-) into a textbox within an aurelia typescript application?

I'm attempting to create a textbox that will only accept contact numbers in the XXX-XXX-XXXX format, but I am having trouble achieving this. Can anyone provide guidance on how to implement a formatted contact number in 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);
   }

typescript validation aurelia

Answer 1

Answer №1

I made some updates to the code in order to make it function similarly to the JsFiddle example you provided in the comments.

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));
  }
}

Answer 2

I made some updates to the code in order to make it function similarly to the JsFiddle example you provided in the comments.

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));
  }
}

Is there a way to automatically insert dashes (-) into a textbox within an aurelia typescript application?

textbox.html

textbox.ts

Answer №1

textbox.html

textbox.ts

Similar questions

Is it possible to dynamically assign a template reference variable to a newly created DOM element in TypeScript?

Angular Test Error: Refactoring requires a source file to be present

Angula 5 presents a glitch in its functionality where the on click events fail

Reorganize the data in a different manner (collections of items instead of individual items linked to groups)

Discover the type of generic keyof in TypeScript

Encountering a problem while attempting to update react-router from version 5 to version 6

Receive notification indicating that the function is of void type

Identifying row expansion in ngx-datatable: detecting expand status on row click

The function's return value encompasses various types, and the property does not exist within them

The type of 'username' cannot be determined without specifying the reference to '@angular/forms/forms' in the node modules

Setting up subdocuments using Typegoose to initialize models

Struggling to grasp React class components while working with generics

Make sure to verify the status of ngmodel or forms to see if they are dirty or contain

Create a unique onblur event listener for every element in a loop in Javascript

Adding text in a key value pair object can be easily achieved by specifying the key

Exploring methods to modify the Discord scopes in the upcoming Auth v5 update

Guide on effectively testing the catch block of a Typescript function using mocha and chai

The options passed to createReadStream in TypeScript do not accept {start: 90, end: 99}

Why Your Custom Validator Might Not Be Displaying Error Messages

A guide on arranging array elements in an Angular application to span over multiple rows