无法使用数字键盘输入数字答案

【问题标题】：Can't enter numbers using numbers pad无法使用数字键盘输入数字
【发布时间】：2023-03-29 06:21:01
【问题描述】：

我有一个将用户输入格式化为电话格式的功能。

它工作正常，只是它不允许右侧数字键盘中的数字，只有字母字符顶部的数字。

我想保持相同的格式，但允许从数字键盘输入数字。

代码如下：

HTML：

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

JS/jQuery:

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

        }, options);

        if (params.format === 'xxx-xxx-xxxx') {
            $(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, 12);
                    $(this).val(inputValue);
                }
            });
            $(this).on('keydown touchend', function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    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 == 7 && e.which != 8 && e.which != 0) {
                    $(this).val(curval + "-");
                }
                $(this).attr('maxlength', '12');
            });

        } else if (params.format === '(xxx) xxx-xxxx') {
            $(this).on('keydown touchend', function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    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));

【问题讨论】：

使用console.log(e.which)查看数字键的代码。
小键盘 #1 对我来说是 which 的 97
@Barmar，顶部的数字从 48 返回到 57
您的问题不在于顶部的数字。这是关于数字键盘的。
数字键盘上的数字从 96 到 105

标签： javascript jquery html validation format

【解决方案1】：

更改以下内容

if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; }

当前 96 到 105 的附加范围大于 57，这导致该语句捕获小键盘。

要允许小键盘：

if (e.which != 8 && e.which != 0 && (e.which < 48 || (e.which > 57 && !(e.which>=96  && e.which<=105 )))) { 
    return false; 
}

【讨论】：