如何实现4个仅支持1-8数字的输入框？解决无输入显示问题

问题根源 #

你的代码里用了<input1>、<input2>这类自定义标签，浏览器不认识这些非标准HTML标签，所以不会渲染成输入框；另外还有无效的闭合标签、重复的id属性，这些都会导致页面渲染异常。同时原代码没有任何输入校验逻辑，无法限制1-8的数字输入。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MhMTSEL</title>
    <style>
        /* 可选样式，让布局更整洁 */
        .input-group {
            margin: 10px 0;
        }
        .input-group label {
            display: inline-block;
            width: 80px;
        }
        .input-group input {
            width: 50px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <label for="alpoint1">M:</label>
        <input type="number" id="alpoint1" min="1" max="8" value="" />
    </div>
    <div class="input-group">
        <label for="alpoint2">S:</label>
        <input type="number" id="alpoint2" min="1" max="8" value="" />
    </div>
    <div class="input-group">
        <label for="alpoint3">El:</label>
        <input type="number" id="alpoint3" min="1" max="8" value="" />
    </div>
    <div class="input-group">
        <label for="alpoint4">MT/hMT:</label>
        <input type="number" id="alpoint4" min="1" max="8" value="" />
    </div>

    <script>
        // 获取所有需要限制的输入框
        const numberInputs = document.querySelectorAll('input[type="number"][min="1"][max="8"]');
        
        numberInputs.forEach(input => {
            // 实时校验输入内容
            input.addEventListener('input', function() {
                // 只保留数字字符
                this.value = this.value.replace(/[^0-9]/g, '');
                // 强制限制数值范围
                if (this.value < 1) {
                    this.value = 1;
                } else if (this.value > 8) {
                    this.value = 8;
                }
            });

            // 失去焦点时再次校验，避免无效值残留
            input.addEventListener('blur', function() {
                if (this.value === '' || isNaN(this.value)) {
                    this.value = '';
                } else if (this.value < 1) {
                    this.value = 1;
                } else if (this.value > 8) {
                    this.value = 8;
                }
            });
        });
    </script>
</body>
</html>

核心修改说明 #

解决显示问题 #

• 把自定义的<input1>/<input2>换成标准的<input type="number">标签，浏览器能正确识别渲染
• 用<label>替代<p1>/<p2>这类自定义标签，通过for属性和输入框id绑定，同时提升页面可访问性
• 移除无效的</div>、<be>标签，用<div class="input-group">整理布局结构
• 给每个输入框设置唯一id，避免id冲突导致的潜在问题

实现输入限制 #

• HTML层面：给输入框加min="1"和max="8"，限制浏览器自带的数字调节按钮范围
• JavaScript层面：
  • 监听input事件，实时过滤非数字字符，并且强制把数值锁定在1-8之间
  • 监听blur事件，处理用户输入空值、非数字的情况，确保最终输入符合要求

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