Restricting characters to input

I’m struggling with the code to restrict specific characters to my input box. The code below work - meaning the console is only showing the characters I’ve allowed in the string. But how do I keep them from showing up in the input?

export function input1_keyPress ( event ) {
var key = event . key ;
if ( “1234567890AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz.” . indexOf ( key ) < 0 )
return ;
console . log ( key );
}

Do you want to delete the forbidden characters from the input after the user has typed them?

Ideally, the characters never show in the input box.

There’re 2 options:

  1. If you use Wix inputs, you can only delete the character after it’s been typed.

  2. If you create your own custom input using an iframe or custom element (and write your own html, css), you can add a beforeinput event listener and prevent the character to appear in the first place. See example .

If you go for the first option, you should do something like:
Instead of onKeyPress, use onInput (that’s way you’ll catch copy-paste as well).

$w('#input).onInput(event => {
let allowdChars = 'abcd...';//you can do it differently with regex. But let's continue your way
let valArr = $w('#input').value.split('');
let processedVal = valArr.filter(e => allowedChars.includes(e)).join('');
$w('#input').value = processedVal;
})