Topic: How do I restrict character entry outside input class type say in a function defined edit?
*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;
}
}
}
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;
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
Arkadiusz Idzikowski staff commented 5 years ago
What is the exact problem here?
event.preventDefault()should correctly block contentEditableSpencer 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; }