打造实用数字输入框：纯原生HTML、CSS与JavaScript实现

结城

已于 2025-07-24 12:01:13 修改

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：原生JavaScript实战文章标签： input美化组件 css html javascript

于 2019-03-23 08:40:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43487181/article/details/88755930

原生JavaScript实战专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的数字输入框插件实现方法，该插件能够限制输入范围，并通过按钮进行增减操作。同时，插件还具备基本的样式变化及交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，数字输入框（Number Input）常用于需要用户输入数值的地方，如商品数量选择、表单计数等。然而，原生的<input type="number">样式单一，且内置的上下箭头可能不符合设计需求。今天，我们将通过纯原生的HTML、CSS和JavaScript，打造一个美观、交互友好的自定义数字输入框组件。代码简洁实用，适合初学者学习，也为有经验的开发者提供灵感！

为什么要自定义数字输入框？

原生的<input type="number">样式受限于浏览器默认设计，内置的上下箭头难以定制，且跨浏览器体验不一致。自定义数字输入框的优势包括：

样式灵活：通过CSS实现个性化外观，完美适配设计需求。
交互优化：结合JavaScript实现加减按钮、边界控制，提升用户体验。
统一体验：去除原生箭头，确保跨浏览器一致性。

下面，我们将基于一个实际案例，详细解析如何用纯原生方式实现自定义数字输入框。

实现思路

HTML结构：使用label包裹input作为容器，动态添加加减按钮。
CSS样式：设计输入框和按钮的样式，去除原生箭头，优化交互效果。
JavaScript交互：动态生成按钮，处理加减逻辑，控制数值边界。

代码详解

HTML结构

我们使用label.number-group作为数字输入框的容器，包含一个input[type="number"]。通过JavaScript动态添加加减按钮，input负责输入功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义数字输入框</title>
</head>
<body>
    <label class="number-group">
        <input type="number">
    </label>
    <label class="number-group">
        <input type="number">
    </label>
</body>
</html>

CSS样式

CSS部分定义了数字输入框和按钮的视觉效果：

去除原生箭头：通过-webkit-appearance和-moz-appearance去除input[type="number"]的上下箭头。
容器样式：number-group设置为内联块，带边框和圆角，鼠标悬停时边框颜色变化。
按钮样式：加减按钮使用a标签，设置固定宽度和背景色，禁用状态降低透明度。
输入框样式：无边框，居中对齐，与按钮无缝衔接。

* {
    margin: 0;
    padding: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.number-group {
    display: inline-block;
    height: 30px;
    border: 1px solid #ddd;
    margin-top: 50px;
    margin-left: 50px;
    border-radius: 5px;
    cursor: pointer;
}
.number-group:hover {
    border: 1px solid #ccc;
}
.number-group a {
    text-decoration: none;
    display: inline-block;
    width: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #eee;
    font-size: 18px;
    color: #888;
    user-select: none;
}
.number-group a:hover {
    color: #00A6FF;
}
.number-group a:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    float: left;
    border-right: 1px solid #ddd;
}
.number-group a:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    float: right;
    border-left: 1px solid #ddd;
}
.number-group a.disable {
    opacity: 0.4;
    cursor: not-allowed;
}
.number-group input {
    width: 50px;
    padding: 0 10px;
    border: none;
    outline: none;
    line-height: 30px;
    float: left;
    text-align: center;
    color: #666;
}
.number-group:after,
.number-group:before {
    display: block;
    clear: both;
    content: '';
    height: 0;
}

JavaScript交互

JavaScript负责动态生成加减按钮并处理交互逻辑：

初始化：遍历所有input[type="number"]，为每个label添加加减按钮，设置初始值为最小值。
按钮事件：点击加减按钮时，更新input值，并根据最小值和最大值控制按钮的禁用状态。
输入框事件：监听焦点、失焦和值变化，动态调整边框颜色和按钮状态，确保数值在范围内。

function jiecheng_input(min = 1, max = 10, step = 1) {
    var number_groups = document.querySelectorAll('[type="number"]');
    for (var i = 0; i < number_groups.length; i++) {
        var that = number_groups[i];
        that.value = min;
        var parent = that.parentElement;
        var lastA = document.createElement('a');
        lastA.href = 'javascript:;';
        lastA.appendChild(document.createTextNode('-'));
        lastA.className = 'disable';
        parent.insertBefore(lastA, that);
        var nextA = document.createElement('a');
        nextA.appendChild(document.createTextNode('+'));
        nextA.href = 'javascript:;';
        parent.appendChild(nextA);
        that.onfocus = function() {
            this.parentElement.style.borderColor = '#00A6FF';
        };
        that.onblur = function() {
            this.parentElement.style.borderColor = '#ddd';
        };
        that.onchange = function() {
            this.nextElementSibling.className = '';
            this.previousElementSibling.className = '';
            if (this.value >= max) {
                this.value = max;
                this.nextElementSibling.className = 'disable';
            }
            if (this.value <= min) {
                this.value = min;
                this.previousElementSibling.className = 'disable';
            }
        };
        lastA.onclick = function() {
            var lvalue = this.nextElementSibling.value - step;
            this.className = '';
            this.parentNode.querySelector('a:last-child').className = '';
            if (lvalue <= min) {
                lvalue = min;
                this.className = 'disable';
            }
            this.nextElementSibling.value = lvalue;
        };
        nextA.onclick = function() {
            var nvalue = parseInt(this.previousElementSibling.value) + step;
            this.parentNode.querySelector('a:first-child').className = '';
            this.className = '';
            if (nvalue >= max) {
                nvalue = max;
                this.className = 'disable';
            }
            this.previousElementSibling.value = nvalue;
        };
    }
}
jiecheng_input();