Topic: How do I restrict character entry outside input class type say in a function defined edit?

Spencer LeBlanc free asked 5 years ago


*Expected behavior*So whenever I lookup how to restrict character entry in a field, most search results return solutions for input type, I need a way to restrict character entry from a field that calls for info in a databinding span and I have an enable editing feature already implemented/working, I just need a way to restrict characters such as dates only accept numerals or backslashes'/' and for fields like Location to only accept letter and certain punctuation -,',&.

*Resources (screenshots, code snippets etc.)*The HTML portion:

          <td>
              <span [attr.contenteditable]="Editmode"  (keyup)="changeValue(el.id, 'name', $event)" >{{j.title}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'date', $event)" >{{j.date | date: 'shortDate'}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'location', $event)" >{{j.location}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'status', $event)" >{{j.status}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeNumber(el.id, 'opens', $event)" >{{j.openings}}</span>
          </td>
          <td>
              <span [attr.contenteditable]="Editmode" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'duration', $event)" >{{j.duration}}</span>
          </td> 

Associated typescript:

export class TableviewComponent implements OnInit, AfterViewInit { Editmode= false;


onKeydown(event){
    event.preventDefault();
  }
changeValue(id: number, property: string, event: any) {
    this.editField = event.target.textContent;
  }

_keyUp(id: number, event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);

    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
    if(id > this.personList.length){
      event.preventDefault();
      id= this.personList.length;
      return id;
    }
}
}

Arkadiusz Idzikowski staff commented 5 years ago

What is the exact problem here? event.preventDefault() should correctly block contentEditable


Spencer LeBlanc free commented 5 years ago

that does what is intended the problem is when hitting the edit button that enables editting I need to have the ability to only edit character/special keys or numbers exclusively. preventDefault() disables all editting which is only when "edit" is not pressed or locked

Editlist(){ this.Editmode=true; } Editclose(){ this.Editmode=false; }


Arkadiusz Idzikowski staff answered 5 years ago


Here is a working example. I changed event listener from keyup to keydown and slightly adjusted regexp pattern. You may also want to add some changes to the if statement/pattern to allow enter or backspace keys.

HTML:

<td>
  <span [attr.contenteditable]="true"  (keydown)="onKeydown($event)" >test</span>
</td>

TS:

  onKeydown(event: any) {
    const pattern = /[0-9\+/\\/ ]/;

    if (!pattern.test(event.key)) {
      // invalid character, prevent input
      event.preventDefault();
    }
  }

Spencer LeBlanc free commented 5 years ago

Thanks found a solution through variant of this by binding (keypress) to an event function similarly

onPreventAlpha(event: any){ if (
  (event.charCode >= 48 && event.charCode <= 57)

) {
  console.log("A number was entered");
  console.log(event.charCode);
  return;  // let it happen, don't do anything

}

else
{
  event.preventDefault();
  console.log("DENIED!!!")
  console.log(event.charCode);
  // return;
}


}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No