How to make a lightning-input allow only numeric values in LWC

I have a lightning-input to display phone number in a pattern 111-111-1111.

I took a lightning-input of type text and written an onblur method handlePhone and sent the inputted phone number as parameter to it. Then I'm formatting it to show the value in above mentioned pattern. But with this, it is allowing me to enter alphabets in the input and I strictly want to restrict to numericals.

Html:

<lightning-input value={phone} type="text"  maxlength="10" onblur={handlePhone} onchange={handleInputChange} name="mobile"></lightning-input>

Js:

handlePhone(phoneNumber) {
        var s = ("" + phoneNumber).replace(/\D/g, '');
        var m = s.match(/^(\d{3})(\d{3})(\d{4})$/);
        var formatPhone = (!m) ? null : m[1] + "-" + m[2] + "-" + m[3];
        this.phone = formatPhone;
    }

When I take a lightning-input type as number , my above method is not working and showing the value as 9,99,999,9999 and not following the pattern as per my requirement. Any way to achieve this by restricting the input to numbers and also display as per the pattern?