Understanding regex behavior with Lightning Input [closed]

Question

I'm new with all the LWC topic. But for now I'm having issues with some regex. To Begin with I have my own LWC created with a few fields some of them are type number such this one:

<lightning-input label="CCV" type="number" value={valueCvv} onchange={handleCvvChange} id="card-ccv" maxlength="3"></lightning-input>

From what I'm trying to do in this case CCV is for the input only accept numbers (0-9). But for now is accepting them but also this characters ´ + , . -. Here is the event:

 handleCvvChange(event){
    this.valueCvv = event.target.value;    
    event.detail.value = event.detail.value.replace(/^([0-9])*$/,'');
}

Thanks in advance!

Answer 1

change the handleCvv method to this:

In template change `onchange` to `onkeypress`

handleCvvChange(event) {
    if (event.key.length === 1 && /\D/.test(event.key)) {
        event.preventDefault();
    } else {
        this.valueCvv = event.target.value;
    }
}

what this does is we replace all non digit character with the value you specified in the second parameter of .replace method and reassign it back to valueCvv property