如何在JavaScript中针对非数字输入弹出指定提示框

我来帮你搞定这个问题！你的核心需求是在用户输入非数字内容时弹出提示，同时只允许输入数字，现在的问题是提示功能没关联到输入事件，而且原代码还允许逗号输入，不符合你的要求。先帮你梳理下原代码的几个问题：

• 重复引入了jQuery库，容易导致冲突，建议只保留一个版本
• 内联的onkeypress事件只是阻止了非数字和逗号的输入，但完全没实现弹出提示的功能，还额外放开了逗号输入，和你「仅允许数字」的需求不符
• 底部那段setTimeout和confirm的代码完全无效，属于冗余代码，建议删掉

下面是修改后的完整代码，我已经帮你实现了需求，并且优化了一些细节：

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Oblicz średnią:</h1>
<form action="">
<input type="number"><br>
<input type="number"><br>
<input type="number"><br>
<div id="result"></div><br>
<input type="button" id="calc" value="Licz">
<input type="reset" value="Reset" class="reset">
</form>

<script type="text/javascript">
(function($) { 
    $.fn.average = function() { 
        var sum = 0; 
        this.each(function() { 
            // 处理空输入框的情况，避免sum变成NaN
            sum += parseFloat($(this).val()) || 0; 
        }); 
        // 避免没有输入时除以0的错误
        return this.length > 0 ? sum / this.length : 0; 
    } 
})(jQuery); 

$(document).ready(function() { 
    // 计算按钮逻辑
    $("#calc").click(function() { 
        var s = $("input[type='number']").average(); 
        console.debug(s); 
        $('#result').html(s); 
    }); 

    // 重置按钮逻辑
    $(".reset").on('click', function() { 
        $("#result").html(" "); 
    }); 

    // 监听键盘输入，拦截非数字内容并弹出提示
    $("input[type='number']").on('keypress', function(event) {
        var inputChar = String.fromCharCode(event.keyCode);
        // 用正则检测是否为0-9的数字
        if (!/[0-9]/.test(inputChar)) {
            alert("请输入0到9之间的数字");
            // 阻止非数字字符输入到框内
            event.preventDefault();
        }
    });

    // 处理粘贴场景，防止用户粘贴非数字内容
    $("input[type='number']").on('input', function() {
        var originalVal = $(this).val();
        // 只保留内容中的数字
        var filteredVal = originalVal.replace(/[^0-9]/g, '');
        if (originalVal !== filteredVal) {
            alert("请输入0到9之间的数字");
            $(this).val(filteredVal);
        }
    });
}); 
</script>
</body>
</html>

几个关键优化点说明：

1. 移除了所有内联事件，改用jQuery统一绑定，代码更整洁易维护
2. 同时处理了键盘输入和粘贴两种场景，确保所有非数字输入都会被拦截并提示
3. 优化了average方法，处理了空输入框和无输入时的异常情况，避免出现NaN或除以0的错误

内容的提问来源于stack exchange，提问作者Missyou