Keyboard not showing for input on mobile

I have an input for phone, The entered numbers are limited to 10 and formatted to (xxx) xxx-xxxx.

It works fine on desktop as only numeric buttons to the right and top of keyboard.

But on mobile devices, When I click the input to enter numbers on some browsers the keyboard is not shown and for other browsers if the keyboard is shown the user could enter any count of numbers and the numbers are not formatted like that (xxx) xxx-xxxx.

You can find the form here http://mdev.epizy.com/phone/phone.html

Here is a fiddle: https://jsfiddle.net/54mupvz9/

The html:

<input type="text" id="phone">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Javascript/jQuery:

<script>
(function ($) {
    $.fn.usPhoneFormat = function (options) {
        var params = $.extend({
            format: 'xxx-xxx-xxxx',
            international: false,

        }, options);

        if (params.format === '(xxx) xxx-xxxx') {
            $(this).on('keydown touchend', function (e) {
                if(8 != e.which && 35 != e.which && 36 != e.which && 37 != e.which && 39 != e.which){
                    if (!(( 48 <= e.which && e.which <= 57) || ( 96 <= e.which && e.which <= 105 ))) {
                        return false;
                    }
                }
                var curchr = this.value.length;
                var curval = $(this).val();
                if (curchr == 3 && e.which != 8 && e.which != 0) {
                    $(this).val('(' + curval + ')' + "");
                } else if (curchr == 9 && e.which != 8 && e.which != 0) {
                    $(this).val(curval + "-");
                }
                $(this).attr('maxlength', '14');
            });
            $(this).bind('paste', function (e) {
                e.preventDefault();
                var inputValue = e.originalEvent.clipboardData.getData('Text');
                if (!$.isNumeric(inputValue)) {
                    return false;
                } else {
                    inputValue = String(inputValue.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3"));
                    $(this).val(inputValue);
                    $(this).val('');
                    inputValue = inputValue.substring(0, 14);
                    $(this).val(inputValue);
                }
            });

        }
    }
}(jQuery));


 //Apply formatting to the input
 $('#phone').usPhoneFormat({
        format: '(xxx) xxx-xxxx',
});